3

私は<tr>Javascript変数を介してを追加しています：

var txtBox = "<tr id='dynTR'><td><input type='text' class='textBoxes' /></td><td><input type='text' class='textBoxes' value='0' /></td><td><input type='button' value='-' /></td></tr>";

私の機能は次のとおりです。

function AddTR(table) {
            $(table).append(txtBox);
        }

HTMLのテーブル構造（関数のボタンと一緒に）は次のとおりです。

<table id="tblTest" class="testTable">
            <thead>
                <tr>
                    <td>Product</td>
                    <td>Quantity</td>
                    <td>Remove TR</td>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
        <br />
        <input type="Button" id="btnTest" value="Add Table Row" onclick="AddTR($('#tblTest'))" />

.remove()では、jQueryの関数を使用して、誤ってすべてのタグを削除せずに親タグを削除するにはどうすればよい<tr id='dynTR'>ですか？

4

2 に答える 2

8

これを考慮すると、削除ボタンです。

<input type='button' value='-' />

次のようになります。

$('#tblTest input[type="button"]').click(function () {
     $(this).closest('tr').remove();
});

onclickインラインやフレンドを使用する代わりに、jQueryイベントハンドラーを使用することをお勧めします。$(this)クリックされたボタンのjQueryオブジェクトであり、ボタン.closest()の親を調べて最初のオブジェクトを見つけtr、それを削除します。

@ShadowWizardによるjsFiddle

最善の方法は、削除ボタンのHTMLを変更することです。

<input type='button' value='-' class='removeButton' />

したがって、次のように削除ボタンをターゲットにできます。

$('#tblTest .removeButton').click(...

前の例では、これらの特別なボタンで必要な場合でも、テーブル内のすべての可能なものがイベントを取得するため、これはより優れていinput type="button"ます（テーブルに他のボタンがない場合は問題ありません）。

于 2011-05-16T07:13:21.780 に答える
4

bazmegakapaの答えはトリックを行う必要があります。また、インラインJavascriptの使用は実際に避ける必要があります。これは、一般的に悪い習慣です。代わりに：

$('#btnTest').click(function() { AddTR($('#tblTest')); });

また、要素オブジェクトの正しいスコープを使用してjQueryの規則に対応するには、次のようにすることができます。

$('#btnTest').click(function() { AddTR.call($('#tblTest')[0]); });

次に、AddTR関数で、要素テーブルを次のように参照できます。this

function AddTR() {
    $(this).append(txtBox);
}

それは物事を予測可能に保ち、同じ規則に従います。

ちょっと待って…。

理論的には、AddTR()関数はテーブル行を追加していますが、そのコンテキストに要素を追加するだけなので、少し誤解を招く可能性があります。あなたが本当にやりたいのは、関数が言うことです。テーブル行を追加してください！代わりにあなたの

var txtBox = "<tr id='dynTR'><td><input type='text' class='textBoxes' /></td><td><input type='text' class='textBoxes' value='0' /></td><td><input type='button' value='-' /></td></tr>";

これはかなり醜く、テーブルの行構造を変更するといくつかの変更が発生します。代わりに、.cloneあなたを助けるために使用してください：

function AddTR() {
   $(this).append($('tr:last').clone());
}

フィドルを参照してください：http： //jsfiddle.net/garreh/6NUK3/1/

于 2011-05-16T07:20:24.180 に答える