Jquery 如何更改可扩展部分上的 +、-

Question

(使用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>&nbsp;</td>
        <td>2007-01-02</td>
        <td>A short description</td>
        <td>15</td>
    </tr>
    <tr class="child-row123">
        <td>&nbsp;</td>
        <td>2007-02-03</td>
        <td>Another description</td>
        <td>45</td>
    </tr>
    <tr class="child-row123">
        <td>&nbsp;</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>&nbsp;</td>
        <td>2007-01-02</td>
        <td>A short description</td>
        <td>10</td>
    </tr>
</tbody>
</table>

期望的结果:

在可展开部分左侧使用“[+]”和“[-]”在文本之间进行更改，以指示它可以展开或压缩。

Answer 1

我在您编辑之前就这样做了，我仍然认为它是有效的。我稍微更改了您的标记，将 [+] 放在自己的单元格中，例如:

<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 ? '[-]' : '[+]');
    });

实例:http://jsfiddle.net/Vxdq8/

如果您确实想要在第二个单元格内使用+/-，我建议您将其包裹在一个跨度中并将上面的相关行更改为:

$(this).children('td').eq(1).children('span').text( expanded ? '[-]' : '[+]');

实例:http://jsfiddle.net/8J8Vj/