如何隱藏一組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元素？

回答

相關問題