jquery - 动态添加和删除行

Question

这是我的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>

我的添加按钮工作正常，但我的删除按钮不起作用。当 del row 单击时，没有任何反应。

Answer 1

代码改动不大

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

<强> Working sample

<小时/>

另一种更简单的方法，不需要对代码进行根本性的更改

我认为更容易的是，如果您向 del row span 添加一个类并删除 onclick，如下所示:

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

并设置委托(delegate)事件处理程序，如下所示:

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

并编写您的del()函数，如下所示:

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

<强> Working Sample

<小时/>

还有一个重要说明

不要忘记将整个代码放入

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

简而言之

$(function() {..})