jquery - 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/

Answer 2

你可以做一个简单的 html/text 替换方法：

http://jsfiddle.net/xBNGB/

我看到你的开始状态是打开的..所以我在加载时将 + 更改为 -。

将您的脚本更改为：

$(function() {
    $('tr.parent')
        .css("cursor","pointer")
        .attr("title","Click to expand/collapse")
        .click(function(){

            var children = $(this).siblings('.child-'+this.id);
            children.toggle();

            if (children.css('display')=='none')
            $(this).html($(this).html().replace('-','+'));
            else
                $(this).html($(this).html().replace('+','-'));
        });
    $('tr[@class^=child-]').hide().children('td');
});

Answer 3

您可以采取两种不同的方法：

1. 将 +/- 文本包裹在一个 span 中，然后当该项目的状态发生变化时，使用 .find() 在单击的元素中定位 span 并更改其内容。

2. 忘记把它作为文本，并将它们作为元素背景包含为更好看的图像（有足够的 padding-left 来容纳）。然后只需切换元素的类，使其显示 + 或 - 背景图像。

Answer 4

            $(document).ready(function () {
                $('tr:first').append('<th></th>');

                $('tr.parent').append('<td>+</td>');

                $('tr.parent').css("cursor", "pointer").attr("title", "Click to expand/collapse").click(function () {
                    $(this).siblings('.child-' + this.id).is(':visible') ? $(this).find('td:last').text('+') : $(this).find('td:last').text('-');
                    $(this).siblings('.child-' + this.id).toggle();
                });

                $('tr[class^=child-]').hide();
            });


//Or  

        $(document).ready(function () {
            $('tr:first').append('<th></th>');

            $('tr.parent').addClass('Expand').append('<td>+</td>');

            $('tr.parent').css("cursor", "pointer").attr("title", "Click to expand/collapse").click(function () {
                $(this).hasClass('Expand') ? $(this).removeClass('Expand').addClass('Compress').find('td:last').text('-') : $(this).removeClass('Compress').addClass('Expand').find('td:last').text('+');
                $(this).siblings('.child-' + this.id).toggle();
            });

            $('tr[class^=child-]').hide();
        });

Answer 5

这是一个工作示例http://jsfiddle.net/NE4rK/