1

Boa noite, estou tentando ocultar por javascript uma linha inteira da tabela abaixo, podem me ajudar?

<!DOCTYPE html>
<html>
<head>
<style>
table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th, td {
    border: none;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}
</style>
</head>
<body>

<div style="overflow-x:auto;">
  <table>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
      <th>Points</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
      <td>94</td>
    </tr>
    <tr>
      <td>Adam</td>
      <td>Johnson</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
      <td>67</td>
    </tr>
  </table>
</div>

</body>
</html>

2
  • Pode ser com jquery, ou quer javascript mesmo? E qual linha voce quer ocultar? tipo eu digito um numero e oculto?
    – LocalHost
    Commented 7/01/2017 às 2:59
  • to tentando fazer em javascript mesmo, pode ocultar a primeira linha, e teria um comando pra ocultar e mostrar Commented 7/01/2017 às 3:09

2 Respostas 2

1

Seria algo desse tipo?

function ocultar() {
  var total = document.getElementsByTagName("tr").length;
  var linha = document.getElementById("linha").value;
  if (linha > 0 && linha < total) {
    if( document.getElementsByTagName("tr").item(linha).style.display=="none"){
    document.getElementsByTagName("tr").item(linha).removeAttribute("style");
    }
    else{
 document.getElementsByTagName("tr").item(linha).style.display="none";}
  } else {
    alert("essa linha não existe");
  }
}
<!DOCTYPE html>
<html>

<head>
  <style>
    table {
      border-collapse: collapse;
      border-spacing: 0;
      width: 100%;
      border: 1px solid #ddd;
    }
    th,
    td {
      border: none;
      text-align: left;
      padding: 8px;
    }
    tr:nth-child(even) {
      background-color: #f2f2f2
    }
  </style>
</head>

<body>
  <input type="text" id="linha">
  <input type="button" value="Ocultar/Desocultar" id="remover" onClick="ocultar()">
  <div style="overflow-x:auto;">
    <table>
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Points</th>
        <th>Points</th>
        <th>Points</th>
        <th>Points</th>
        <th>Points</th>
        <th>Points</th>
        <th>Points</th>
        <th>Points</th>
        <th>Points</th>
        <th>Points</th>
      </tr>
      <tr>
        <td>Jill</td>
        <td>Smith</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
        <td>50</td>
      </tr>
      <tr>
        <td>Eve</td>
        <td>Jackson</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
        <td>94</td>
      </tr>
      <tr>
        <td>Adam</td>
        <td>Johnson</td>
        <td>67</td>
        <td>67</td>
        <td>67</td>
        <td>67</td>
        <td>67</td>
        <td>67</td>
        <td>67</td>
        <td>67</td>
        <td>67</td>
        <td>67</td>
      </tr>
    </table>
  </div>

</body>

</html>

9
  • To tentando fazer aparecer a linha, mas ela nao esta alinhando corretamente Commented 7/01/2017 às 3:27
  • quando conseguir mando aqui Commented 7/01/2017 às 3:27
  • mas está ocultando corretamente, porém o que estou tentando fazer agora é exibir novamente Commented 7/01/2017 às 3:28
  • quando conseguir eu encerro a duvida Commented 7/01/2017 às 3:28
  • eu consegui, pera ai vou editar
    – LocalHost
    Commented 7/01/2017 às 3:28
1

Um jeito de fazer isso é utilizando o querySelectorAll() (disponível tanto no Document como no Element)

Essa função retorna uma array de elementos pelos quais que você pode iterar.

Você pode, por exemplo, definir uma função que recebe um id e um índice e oculta a linha, se esta existir, com o estilo display.

function ocultaLinhaTabela(id, n) {
  var seletor = "#" + id + " tr";
  var linha = document.querySelectorAll(seletor)[n];

  if (linha) linha.style.display = "none";
}

No contexto da sua tabela: https://jsfiddle.net/qf9ped94/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .