Hide entire table row by javascript

Asked

Viewed 2,699 times

1

Good evening, I’m trying to hide by javascript an entire row from the table below, can 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

  • Can it be with jquery, or do you want javascript? And which line do you want to hide? type I type a number and hidden?

  • I’m trying to do javascript anyway, you can hide the first line, and have a command to hide and show

2 answers

1


It would be something like that?

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>

Show 4 more comments

1

One way to do this is by using the 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 receives a id and a index and hides the line, if it exists, with the style display.

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: https://jsfiddle.net/qf9ped94/

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.