Hide entire table row by javascript

Question

Hide entire table row by javascript

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

Good evening, I'm trying to hide by javascript a whole line from the table below, can you help me?

<!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>

javascript html css

asked by anonymous 07.01.2017 / 03:55

2 answers

1

One way to do this is to use querySelectorAll () (available in both Document and Element)

This function returns an array of elements that you can iterate through.

You can, for example, define a function that takes an id and an index and hides the line, / em>.

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

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

In the context of your table: link

07.01.2017 / 04:45

Databinding for JSON.NET objects: how to implement? Close menu when clicking on another

score 1 · Accepted Answer

Would it be something like this?

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>