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 /文本替换方法：

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

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

在一个范围中包装+/-文本，然后当该项目的状态发生变化时，使用.find（）在已点击的元素中找到范围并更改其内容。
忘记把它作为文本，并将它们包含为元素背景的更好看的图像（有足够的填充 - 留下来容纳）。然后，只需切换元素的类，使其显示+或 - 背景图像。

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/

Jquery如何在可扩展部分更改+， -

5 个答案: