5

これは私のjsコードです:

<script>
function add(){
  $('#myTable tr:last').after('<tr><td>4<span onclick="del()">del row</span></td></tr>');
}
function del(){
  $(this).parent('tr').remove();
}
</script>

およびhtml：

<table id="myTable" border="1">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
</table>

<span onclick="add()">add row</span>

追加ボタンはうまく機能しますが、削除ボタンは機能しません。行を削除しても何も起こりませんでした。

4

5 に答える 5

4

コードを少し変更する

function add(){
  $('#myTable tr:last').after('<tr><td>4<span onclick="del(this)">del row</span></td></tr>');
}
    
function del(el) {
    $(el).closest('tr').remove()
}

作業サンプル

別のより簡単なアプローチ。コードを根本的に変更する必要はありません

次のようにクラスを追加してdel row span削除すると、より簡単になると思います。onclick

function add(){
  $('#myTable tr:last').after('<tr><td>4<span class="delRow">del row</span></td></tr>');
}

次のようにデリゲート イベント ハンドラを設定します。

$('#myTable').on('click', 'span.delRow', del);

del()次のように関数を記述します。

function del() {
  $(this).closest('tr').remove();
}

作業サンプル

そして、1つの重要な注意事項

コード全体を配置することを忘れないでください

$(document).ready(function() {..})

要するに

$(function() {..})
于 2012-06-13T16:05:14.437 に答える
1

いくつかのこと。

1. thisインラインスクリプトを使用する場合はウィンドウです。
2.に置き換える必要がありparentますclosest。
3.より良い使用delegate event

function del(){
     $(this).closest('tr').remove(); // closest!!
}    

$('#myTable').on('click', 'span', del);
于 2012-06-13T16:06:11.697 に答える
1

thisスパンにならないので、親を見つけられません。これらのグローバル関数を作成したり、スクリプト属性を使用したりすることはまったくありません。私はそれを次のように書き直します：

<table id="myTable" border="1">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
</table>

<span id="add">add row</span>

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$("#add").on('click', function () {
   $('#myTable tr:last').after(
      $("<tr>")
         .append($("<td>", {text: '4'})
            .append($("<span>", {text: 'del row'})
               .on('click', function () {
                  $(this).closest('tr').remove();
               })
            )
         )
   );
});
</script>
于 2012-06-13T16:25:58.740 に答える
1

del 関数を次のように変更します。

function del(row){
  $(row).closest('tr').remove();
}​

そしてあなたのadd関数を次のようにします：

$('#myTable tr:last').after('<tr><td>4<span onclick="del(this)">del row</span></td></tr>');

jsFiddle の例。

于 2012-06-13T16:12:50.323 に答える
0

以下を使用する必要があります。

$(this).parent('#myTable tr').remove();
于 2012-06-13T16:05:39.950 に答える