Question

我有一个从数据库生成的表，我无法更改后面的代码。基本上它只是一个很长的事件列表，按天分隔。我想设置表格，以便您可以单击日期，然后显示当天的事件。正如我所说的唯一改变html。它是一个生成页面的xsl文件，它只是一个生成表的长输出循环。我想隐藏Day行下的Event行，并且能够按Day单击以显示事件。如果我可以改变每一天的课程，这将很容易，但我不能生成数据，我不能改变编程。

<table>
<tr class="Date"><td>Day 1</td></tr>
<tr><td>Event 1</td></tr>
<tr><td>Event 2</td></tr>
<tr><td>Event 3</td></tr>

<tr class="Date"><td>Day 2</td></tr>
<tr><td>Event 1</td></tr>
<tr><td>Event 2</td></tr>
<tr><td>Event 3</td></tr>
<tr><td>Event 4</td></tr>

<tr class="Date"><td>Day 3</td></tr>
<tr><td>Event 1</td></tr>
<tr><td>Event 2</td></tr>
</table>

Answer 1

nextUntil是您问题的答案：

nextUntil（selector） - 获取每个元素的所有后续兄弟，但不包括由传递的选择器，DOM节点或jQuery对象匹配的元素

$('.Date').click( function() {
   $(this).nextUntil('.Date').toggleClass('hide'); // don't use toggle() because it change display to block/none, we have to use display table-row
}).click(); // hide by default

和css：

tr.hide { display: none; }

fiddle

jQuery在表格中展开/折叠TR，点击

1 个答案: