Как скрыть группу элементов td?

Question

Я делаю динамическую форму, используя таблицу. Мой стол был как ниже.

<table border="1">
    <tr>
        <td>A Label Name</td>
        <td>:</td>
        <td colspan="4"><!-- Input text --></td>
    </tr>
    <tr>
        <td>Category</td>
        <td>:</td>
        <td colspan="4"><!-- Select Option value: { both, group 1, group 2 } --></td>
    </tr>
<tr>
    <!-- Group 1 -->
        <td>Group 1</td>
        <td>:</td>
        <td>- Group 1 Name -</td>
    <!-- End of Group 1 -->

    <!-- Group 2 -->
        <td>Group 2</td>
        <td>:</td>
        <td>- Group 2 Name -</td>
    <!-- End of Group 2 -->
</tr>

Как скрыть элемент td группы 1, чтобы таблица отображала только td группы 2, без необходимости удалять или очищать элементы td с помощью javascript?

Я попытался добавить тэг span, чтобы сгруппировать их, а затем стилевое отображение, чтобы оно стало ничем.

<span style="display:none">
<!-- Group 1 -->
<td>Group 1</td>
<td>:</td>
<td>- Group 1 Name -</td>
<!-- End of Group 1 -->
</span>

Но ничего не произошло. Есть идеи?

Answer 1

Мне всегда интересно, почему люди дают решения jQuery для простых задач.

Я предполагаю, что у вас есть фиксированный формат вашей таблицы, но вы можете легко адаптировать его, если вам нужно больше скрыть непрерывных ячеек:

Дайте вашей таблице ID.

var table = document.getElementById('table-id');
var firstRow = table.rows[0];
var cells = firstRow.cells;
for(var i = 0, l = cells.length; i < 2 && i < l; i++) {
     cells[i].style.display = 'none';
}

Если вам нужно сделать это для каждой строки, вы можете просто зациклить table.rows.

Answer 2

С Jquery это было бы примерно так:

НОВАЯ ВЕРСИЯ

http://jsfiddle.net/dactivo/VPe2U/

Самый изощренный способ был бы таким, slice дает вам возможность выбирать между первым и вторым значением (это индекс на основе 0).

$("#test tr:eq(0) td").slice(0,3).hide();

или в случае, если вы не хотите определять начальную точку (как комментарии @Felix Kling):

$("#test tr:eq(0) td:lt(4)").hide()

СТАРЫЙ ВЕРСИЯ

http://jsfiddle.net/dactivo/SLzNT/

$("#test tr:eq(0) td:eq(0),#test tr:eq(0) td:eq(1),#test tr:eq(0) td:eq(2)").hide();

Что означает скрытие первой / второй / третьей ячейки в первом ряду

Answer 3

Если вы используете jQuery, вы можете установить общий класс для тега (например, class = "className") и использовать

$('.className').hide();

Чтобы инициализировать это, вы можете попробовать добавить стиль к самому тегу?

и используйте

$('.className').show();

чтобы показать клетки, когда они вам нужны

Answer 4

Вы должны сделать каждую группу отдельной <tr>, тогда вы можете скрыть одну из строк, а не другую.Я думаю, что вы получите неожиданные или нежелательные эффекты с 6 столбцами в таблице, из которых видны только три.

<table border="1">
  <tr class="group1" style="display:none">
    <!-- Group 1 -->
    <td>Group 1</td>
    <td>:</td>
    <td>- Group 1 Name -</td>
    <!-- End of Group 1 -->
  </tr>
  <tr class="group2">
    <!-- Group 2 -->
    <td>Group 2</td>
    <td>:</td>
    <td>- Group 2 Name -</td>
    <!-- End of Group 2 -->
  </tr>
  ...

И используйте javascript для установки .group1 в display:block и .group2 в display:none.

Answer 5

[ Рабочая демонстрация ]

function hideCells(root, from, to) {
  root = document.getElementById(root);
  var all  = root.getElementsByTagName("td");

  if (to > all.length)
    to = all.length;

  for ( var i = from-1; i < to; i++ ) {
      all[i].style.display = "none";    
  }
}

// USAGE
hideCells("table_id", 1, 3); // hides: 1, 2, 3 <td>  ​