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>

如何隐藏group 1 td元素，以便表格只显示第2组的td，无需使用javascript删除或清除td元素？

我尝试添加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解决方案。

我假设你有一个固定格式的表格，但如果你需要隐藏更多 continuos 单元格，你可以轻松地调整它：

为您的表提供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，你可以在标签上设置一个公共类（例如class =“className”）并使用

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

要初始化这个，您可以尝试将内联样式添加到标记本身吗？

并使用

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

在需要时显示单元格

Answer 3

使用Jquery，它将是这样的：

新版本

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

最软化的方式就是这样，切片让你有机会在第一个和第二个值之间进行选择（它是基于0的索引）。

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

或者如果您不想定义起点（如@Felix Kling评论）：

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

OLD VERSION

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

<强> [Working demo]

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>

如何隐藏一组td元素？

5 个答案: