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

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();
}

现在完美运行:)