用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显示和隐藏动态生成的表格元素

回答

相关问题