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>

我的添加按钮很好用，但我的删除按钮不起作用。当 del row 点击什么也没发生。

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

工作样本

还有一个重要的注意事项

不要忘记将整个代码放入

$(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

将您的 del 函数更改为：

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

并将您的添加功能添加到：

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

jsFiddle 示例。

于 2012-06-13T16:12:50.323 回答
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 回答
0

你应该使用：

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