Question

我有一个从数据库中提取的项目表。这些项目的布局如下：

(+) 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>

我能够想到的唯一方法是通过再次循环记录并将此a href添加到加号来动态生成JavaScript函数：

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

它有效，但它很难看。有更优雅的方式吗？

感谢。

Answer 1

我会添加一个额外的属性来识别受影响的行，例如：

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

那么javascript将是

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

有关jQuery here

中有用的属性选择器的更多信息

Answer 2

这真是太丑了：

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

你没有打开<td>但是关闭它，colspan="2"也必须在<td>

之内

使用jQuery显示和隐藏动态生成的表元素

2 个答案: