Переключить отображение таблицы <tr>: нет с использованием Javascript

Question

Я хотел бы использовать JavaScript, чтобы сделать строку таблицы display:none; и показать ее снова одним нажатием кнопки.

Answer 1

Обычный JS - http://jsfiddle.net/mplungjan/t3mUq/

<script type="text/javascript">
function toggle(row) {
  if (isNaN(row)) row = document.getElementById(row); // id passed
  else row = document.getElementById('table1').rows[row]; // idx passed
  if (row) row.style.display=(row.style.display=='none')?'':'none';
  return false;
}

</script>
<a href="#" 
onClick="return toggle('row3')">Toggle row with ID row3</a>
<a href="#" 
onClick="return toggle(1)">Toggle 2nd row</a>

Answer 2

Вам необходимо изменить атрибут style элемента:

// `rowElement` is a reference to the row you want to hide
rowElement.style.display = 'none';

Answer 3

Это ванильное решение JS работает (http://jsfiddle.net/C5g8U/3/):

tr = document.getElementsByTagName('tr');

for (var i = 0; i < tr.length; i++) {
  if (tr[i].getElementsByTagName('td').length == 3) {
    tr[i].style.display = 'none';
  }
}

Я немного заржавел с моим ванильным JS, поскольку я использую jQuery для таких вещей, поэтому вот решение jQuery:

$('#button').click(function() {
  $('tr').each(function() {
    if ($(this).find('td').length == 3) {
      $(this).toggle();
    }
  });
});

Answer 4

Дайте <tr> идентификатор, а затем вы можете скрыть его с помощью jQuery:

<tr id="sampleRow">
</tr>

$("#button").click(function () {
    $("#sampleRow").toggle(); 
});

Toggle сделает его скрытым, если он в данный момент виден, и покажет его, если он в данный момент скрыт.