0 
<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>

これらのテーブル行を動的に作成しました。すべての行には親 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 つ以上のレベルがある場合、何らかの理由でこれが機能しません。

4

2 に答える 2

0

JavaScriptコードをデバッグした後、問題の原因を見つけました。すべての再帰呼び出しに対して variable(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();
}

今では完璧に動作します:)

于 2012-12-12T18:14:59.030 に答える
0

私の意見では、あなたが提供したコードは、あなたが何をしたいのかについての良い考えを与えていません(そして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();
}

質問の解釈が間違っていたらすみません。

于 2012-12-11T17:31:41.193 に答える