用jQuery顯示和隱藏動態生成的表格元素

我有一個從數據庫中拉出的項目表。該項目佈局如下：用jQuery顯示和隱藏動態生成的表格元素

(+) 02/04/2014 
Item 1 
(+) 02/05/2014 
Item 2 
Item 3 
(+) 02/06/2014 
Item 4 
Comment for item 4 
Item 5

日期下的項目是隱藏的，當用戶點擊（+）號，它會顯示它下面的物品，並用替換（+）（ - ）隱藏項目。

的HTML大致如下所示：

<table> 
<tr><td>(+)</td><td>02/04/2014</td></tr> 
<tr id="id_1" class="hidden"><td colspan="2">Item 1</td></tr> 
<tr><td>(+)</td><td>02/05/2014</td></tr> 
<tr id="id_2" class="hidden"><td colspan="2">Item 2</td></tr> 
<tr id="id_3" class="hidden"><td colspan="2">Item 2</td></tr> 
<tr><td>(+)</td><td>02/06/2014</td></tr> 
<tr id="id_4" class="hidden"><td colspan="2">Item 4</td></tr> 
<tr id="comment_id_4" class="hidden"><td colspan="2">Comment for item 4</td></tr> 
<tr id="id_5" class="hidden"><td colspan="2">Item 5</td></tr> 
</table>

我已經能夠認爲這樣做是通過記錄再次循環動態生成一個JavaScript函數，並添加此a href到的唯一途徑加號：

<a href="#" onclick="toggle(242014);return false">(+)</a>

而這裏的生成的JavaScript樣本：

function toggle(id) { 
    switch (id) { 
    case 242014: 
     $("#id_1").toggle(); 
     break; 
    case 252014: 
     $("#id_2").toggle(); 
     $("#id_3").toggle(); 
     break; 
    case 262014; 
    $("#id_4").toggle(); 
    $("#comment_id_4").toggle(); 
    $("#id_5").toggle(); 
    break; 
    }

它有效，但它很醜。有沒有更好的方法來做到這一點？

謝謝。

來源

2014-02-05 Tom

檢查你的HTML標記，它是無效的，而且它開上了合併單元格線之前，你不應該在這裏使用的ID –

沒有TD關閉？ – Makrand

是的，我把它們快速地扔在一起，我的壞話，因爲他們說...固定。 – Tom

我會添加一個額外的屬性來標識，例如受影響的行：

<tr colspan="2" id="id_2" date="12122014" class="hidden" >

隨後的JavaScript將

01關於jQuery的有用的屬性選擇

function toggleByDate(date){ $('tr[date="'+date+'"]').toggle(); }

更多信息here

來源

2014-02-05 12:19:49 Edorka

感謝作品的魅力。 – Tom

這實在是太醜：

<tr colspan="2" id="id_2" class="hidden">Item 2</td></tr>

你不打開<td>，但關閉它，也colspan="2"必須是內部的<td>

來源

2014-02-05 12:18:46 smnbbrv

糟糕，我輸入了真正快速。我正在處理的HTML是有效的，將修復該帖子。 – Tom

用jQuery顯示和隱藏動態生成的表格元素

回答

相關問題