(使用jquery)我有以下功能
$(function() {
$('tr.parent')
.css("cursor","pointer")
.attr("title","Click to expand/collapse")
.click(function(){
$(this).siblings('.child-'+this.id).toggle();
});
$('tr[@class^=child-]').hide().children('td');
});
我有以下网页
<table>
<col style="width:40px;">
<col style="width:80px;">
<col style="width:150px;">
<col style="width:40px;">
<thead>
<tr>
<th>ID</th>
<th colspan="2">Name</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr class="parent" id="row123">
<td>123</td>
<td colspan="2">[+]Bill Gates</td>
<td>100</td>
</tr>
<tr class="child-row123">
<td> </td>
<td>2007-01-02</td>
<td>A short description</td>
<td>15</td>
</tr>
<tr class="child-row123">
<td> </td>
<td>2007-02-03</td>
<td>Another description</td>
<td>45</td>
</tr>
<tr class="child-row123">
<td> </td>
<td>2007-03-04</td>
<td>More Stuff</td>
<td>40</td>
</tr>
<tr class="parent" id="row456">
<td>456</td>
<td colspan="2">[+]Bill Brasky</td>
<td>50</td>
</tr>
<tr class="child-row456">
<td> </td>
<td>2007-01-02</td>
<td>A short description</td>
<td>10</td>
</tr>
</tbody>
</table>
期望的结果:
在可展开部分左侧使用“[+]”和“[-]”在文本之间进行更改,以指示它可以展开或压缩。
最佳答案
我在您编辑之前就这样做了,我仍然认为它是有效的。我稍微更改了您的标记,将 [+]
放在自己的单元格中,例如:
<tr class="parent" id="row123">
<td>[+]</td>
<td>123</td>
<td colspan="2">Bill Gates</td>
<td>100</td>
</tr>
然后你的代码就变得简单了:
$('tr.parent')
.css("cursor","pointer")
.attr("title","Click to expand/collapse")
.click(function(){
var sibs = $(this).siblings('.child-'+this.id).toggle();
var expanded = sibs.is(':visible');
$(this).children('td').eq(0).text( expanded ? '[-]' : '[+]');
});
如果您确实想要在第二个单元格内使用+/-,我建议您将其包裹在一个跨度中并将上面的相关行更改为:
$(this).children('td').eq(1).children('span').text( expanded ? '[-]' : '[+]');
关于Jquery 如何更改可扩展部分上的 +、-,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10518312/