1

我使用了我在网络中获得的代码，它在每个 onclick 事件中添加一个表格行。它对我来说很完美，直到我意识到我需要为每一行设置一个 onclick 事件，当点击它时，它会删除该行。

有没有办法使用我的代码来实现？

请看下面的代码：

Javascript/JQuery 代码：

<script>
    var counter = 2;            
    function addRow() {
        event.preventDefault();
        var newRow = jQuery('<tr><td><label>'+ counter +'</label></td><td><textarea name="txtActionStep' + counter + '" style="width:300px; height: 50px; word-wrap:break-word;"></textarea></td><td valign="top"><input type="text" name="txtOwner' +              counter + '"/></td></tr>');
        counter++;                
        jQuery('table.actionsteps-list').append( newRow );
    }
</script>

HTML 代码：

<table class="actionsteps-list" width="510">
   <tr>
       <th colspan="3" align="left">Action Steps</th>
   </tr>
   <tr>
       <td>Step #</td><td>Action Step</td><td>Owner</td>
   </tr>
   <tr>
       <td><label>1</label></td>
       <td><textarea name="txtActionStep1" style="width:300px; height: 50px; word-wrap:break-word;"></textarea></td>
       <td valign="top"><input type="text" name="txtOwner1" /></td>
   </tr>
</table>
<table width="510">
   <tr>
       <td align="right"><a href="#" title="" onclick="javascript:addRow();">Add Action</a></td>
   </tr>
</table>

谢谢！

4

2 回答 2

3

当然，使用委托我们可以做到这一点。

$('table.actionsteps-list').on('click', 'tr', function(e){
  $(this).remove();
});

您可能想在行中添加一个按钮来表示删除，所以假设您添加（到每一行）：

<td><button class="delete">Delete</button></td>

然后只需像这样更改您的委托方法：

$('table.actionsteps-list').on('click', '.delete', function(e){ 
  e.preventDefault(); // stops the page jumping to the top
  $(this).closest('tr').remove();
});
于 2013-09-12T06:49:16.357 回答
1

使用委托在表级别捕获事件，这样您添加的任何新行也将被处理：

$('.actionsteps-list').on('click', 'tr', function(){
  $(this).remove();
});

边注：

不要将javascript:协议用于内联 Javascript，仅当您将 Javascript 放在href链接的属性中时才会使用该协议：

<a href="#" title="" onclick="addRow();">Add Action</a>
于 2013-09-12T06:55:42.000 回答