动态添加和删除行

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按钮不起作用.点击del行时没有任何事情发生.

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

工作样本

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

我认为更容易的是，如果您添加一个类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();
}

工作样本

还有一个重要的说明

不要忘记将整个代码放入

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

简而言之

$(function() {..})