如何隐藏一组td元素？

我正在制作一个使用表格的动态表单。我的表如下所示。如何隐藏一组td元素？

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

如何隐藏组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>

但是什么也没有发生。任何想法？

来源

2010-10-24 Hafizul Amri

假定有只是一种形式中，

为比分组形式输入的更合适的语义元素。这个HTML是无效的，我想知道为什么你首先使用表格。 – 2010-10-24 18:16:18

与jQuery，这将是这样的：

新版本

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

最sofisticated的方法是这样的，片给你的第一和之间进行选择的机会第二个值（它是基于0的索引）。

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

或者如果你不想定义起点（如@Felix克林评论）：

$("#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();

这意味着隐藏第一个/第二个/第三个单元格第一行

来源

2010-10-24 08:58:45 netadictos

谢谢，它会很有用！ – 2010-10-24 09:01:37

@Hafizul Amri-我编辑了我的答案，就像那样。 – netadictos 2010-10-24 09:15:47

@ $（“＃test tr：eq（0）td：lt（4）”）更容易。hide（）' – 2010-10-24 09:29:03

如果你使用jQuery，你可以在标签（例如类=“的className”）设置公共类，并使用

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

初始化这一点，你可以尝试addind的风格的行内的标签本身？

，并使用

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

，以显示单元格时，你需要他们

来源

2010-10-24 08:50:15

它没有工作，即使我用.html（''）来清除一组td元素。 – 2010-10-24 08:54:44

它的工作原理..当我设置类到组上的每个TD元素。 – 2010-10-24 08:58:12

你应该让每个组在它自己的<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。

来源

2010-10-24 08:52:57 BudgieInWA

@BudgielnWA我需要在一行中显示。假设所有组都需要显示，我需要将它们显示在一行中。 – 2010-10-24 08:59:42

啊，我没有指望那个。其他答案是否可以解决您的问题？ – BudgieInWA 2010-10-24 09:04:09

我总是想知道为什么人们为简单问题提供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循环。

来源

2010-10-24 09:27:23

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

来源

2010-10-24 09:37:49 galambalazs

如何隐藏一组td元素？

回答

相关问题