1

jquery で問題に直面しています。jQuery を使用してコントロールをテーブルに追加し、削除ボタンを使用してテーブル内の特定の行を削除しました。これは、テーブルにコントロールを作成する方法に関する私のコードです。

HTML

<table id="controls" cellpadding="10" cellspacing="10">
</table>
<input id="btnAdd" type="button" value="Add" />

私のjqueryコードは次のようになります

jquery

$(document).ready(function() {
            $("#btnAdd").click(function() {
        var field = $("#field").val();
                var year = new Date().getFullYear()
                var DDL_fromProfession = "<select name='ParametersFromProf' id='DDL_FromProYear'>";
                for (var i = 1950; i <= year; i++) {
                    DDL_fromProfession += "<option text='" + i + "' value='" + i + "'>" + i + "</option>";
                }
                DDL_fromProfession += "</select>";
                var DDL_ToProfession = "<select name='ParametersToProf'  id='DDL_ToProYear'>";
                for (var i = 1950; i <= year; i++) {
                    DDL_ToProfession += "<option text='" + i + "' value='" + i + "'>" + i + "</option>";
                }
                DDL_ToProfession += "</select>";

                var newRow1 = "<tr><td align='center' style='font-size: large; color: #212121;' height='35px'>from"
                 + DDL_fromProfession + " to " + DDL_ToProfession + "</td></tr>"
                 + "<tr><td align='center' style='font-size:large;color:#212121;' height'35px'>"
                 + "<input type='checkbox' name='chkbx_CurrPro' value='" + k + "'>I currently work here</input>";
                newRow1 += "<br/><button id='btn_rmv'>Remove</button>";


                var input = "<input name='parameters' id='field' type='text' />";
                var input1 = "<input name='parametersCompany' id='field' type='text'/>"

                //var inputCurrent="<input name='Current' id='Currfield' type='hidden'/>"

                var newRow = "<tr><td align='center' style='font-size: x-large; color: #212121;' height='35px'>"
                 + input + " at " + input1 + "</td></tr>";
                $('#controls').append(newRow);
                $('#controls').append(newRow1);
            });
        });

私が使用している最後の行を削除するには。 jquery

$(document).ready(function() {

            $("#controls").delegate("#btn_rmv", "click", function() {
                $(this).closest("tr").remove();
                return false;
            });
        });

削除ボタンをクリックしてページを更新し、最後の行ではなく追加したすべての行を削除します。注：私が掘り下げた.delegateのはサーバー側であり、ページを更新します。$("#btn_rmv").click(function()ページの最後の行を削除できません

正しい方向に向けてください。前もって感謝します

4

4 に答える 4

1

このようにできます..

   var RowCount = 0;

    $(document).ready(function() {

        $("#btnAdd").click(function() {
            RowCount = RowCount + 1;

            var newRow1 = "<tr id='tr" + RowCount + "'><td align='center' style='font-size: large; color: #212121;' height='35px'>from"
             + DDL_fromProfession + " to " + DDL_ToProfession + "</td></tr>"
             + "<tr><td align='center' style='font-size:large;color:#212121;' height'35px'>"
             + "<input type='checkbox' name='chkbx_CurrPro' value='" + k + "'>I currently work here</input>";

            newRow1 += "<br/><button id='btn_rmv' onclick='RemoveRow(" + RowCount + ")'>Remove</button>";
        });

    });

    function RemoveRow(RowID) {
        $('#RemoveRow' + RowID).remove();
    }
于 2013-04-16T09:27:50.460 に答える
1

で削除クリック ハンドラを接続しているようです$(document).ready。

document.ready では、削除ボタンはまだ存在しません (document.ready コードの実行後に [追加] をクリックすると動的に生成されるため)。それが機能していない理由$("#btn_rmv").click(function()...です。

そのため、削除ボタンをイベントに動的に挿入した後$("#btnAdd").click、クリック ハンドラーを明示的に追加する必要があります。

編集：

一意の ID (例: btn_rmv_1、btn_rmv_2 など) を使用して削除ボタンを生成する場合、(新しいボタンを DOM に追加した後) Add-handler に次を追加できます。

$('#btn_rmv_1').click(removeButtonFunction);
于 2013-04-16T09:28:24.940 に答える