我是jQuery的新手,这是我在Stack Overflow上的第一篇文章。
我正在编写一个Toggle脚本,如果单击了几个(但不是全部)表格单元格,脚本将切换其下方tr的可见性,并在其中一个单元格中对div执行更改类显示加号/减号图标。我希望简化我的脚本和HTML,或者获得如何使其更好的一般指示。
jQuery如下:
$(function() {
/************************************************************/
// Show/Hide functionality
$('.showDetails', '#summaryTable').hide();
$('#summaryTable').on('click', '.toggleIt', function(e){
var $this = $(this).parents("tr");
$this.next().toggle(0, function() {
var rowExpand = $('.rowExpand', $this);
rowExpand.toggleClass('rowContract');
});
});
/************************************************************/
});
HTML如下:
<table id="summaryTable">
<thead>
<tr>
...
</tr>
</thead>
<tbody>
<tr>
<td class="toggleIt"><div class="rowExpand">Expand/Contract details</div></td>
<td class="toggleIt">Content</td>
<td class="toggleIt">Content</td>
<td>*input field*</td>
<td class="toggleIt">Content</td>
<td class="toggleIt">Content</td>
<td>*Trash can icon*</td>
</tr>
<tr class="showDetails">
<td colspan="7" class="expand">
<div>
Content to be shown when toggled...
</div>
</td>
</tr>
<!-- Rinse and repeat -->
</tbody>
</table>
注意单元格上的所有那些toggleIt类,可以单击并展开tr吗?好像我应该能够只在表格单元格上放置一个类,我不希望表格在点击时展开。 (输入字段和垃圾桶单元格。)
欢迎任何想法或建议。 谢谢!
答案 0 :(得分:1)
你可以使用:not selector(http://api.jquery.com/not-selector/)来做到这一点 e.g。
$("td:not(.toggleDisabled)").each(function(){$(this).click(function(){$(this).toggle()})})