Question

<tr onclick="removeAllDescendant(this)" parentid="@item.parentId" id="@item.id">
    <td>
    Use: <input type="checkbox" value="@item.iaId" />&nbsp; &nbsp; &nbsp; 
    Qty: <input type="text" class="width_100" />
</td>
<td>@item.location</td>
<td>@item.qty @item.uom</td>
<td>@item.createDt</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>

我已动态创建这些表行，每行都有parent-id和id。我想在用户点击行时折叠所有后代行。

这是javascript代码 -

function removeAllDescendant(row)
{
   var id = $(row).attr("id");
   removeRows(row, id);
}

function removeRows(row, id) {
    var tr = $(row).nextAll('tr [parentid=' + id + ']');
    if (tr.length > 0) {
        for (i = 0; i < tr.length; i++) {
            id = $(tr[i]).attr("id");
            alert(id);
            removeRows(tr[i], id);
        }
    }
    $(tr).remove();
}

你们有没有看到这个递归函数中的任何错误，由于某种原因，如果我有超过3个级别，这不起作用。

Answer 1

在我看来，您提供的代码并不能很好地了解您要执行的操作（并且expandMainRow函数未定义）。无论如何，如果我没有正确理解，你想在点击一下后消失所有行，对吗？（我的意思是，这样：http://jsfiddle.net/Polmonite/Hdaeg/）如果是这种情况，你可以简单地这样做：

$('table tr:not(:last-child)').on('click',function(){
    if($(this).hasClass('clicked')){
        $(this).removeClass('clicked').nextAll('tr').show();
    }else{
        $(this).addClass('clicked').nextAll('tr').removeClass('clicked').hide();
    }
});

这样，当您单击某行时，以下行会消失，而如果您重新单击它们，它们会重新出现。如果您不希望它们在点击时重新出现，您可以更简单地执行：

$('table tr').on('click',function(){
    $(this).nextAll('tr').hide();
}

如果我误解了这个问题，我道歉。

Answer 2

调试javascript代码后，我发现了问题的原因。我应该为每个递归调用定义变量（i）。所以纠正的代码是......

function removeRows(row, id) {
    var tr = $(row).nextAll('tr [parentid=' + id + ']');

    if (tr.length > 0) {
        for (var i = 0; i < tr.length; i++) {
            var tempId = $(tr[i]).attr("id");
            removeRows(tr[index], tempId);
        }
    }
    $(tr).remove();
}

现在完美地工作：）

表行可使用递归javascript函数进行扩展

2 个答案: