Question

我需要帮助才能理解我做错了什么。我在循环中有下表：

<table width="100%" class="box-table-green" align="left" id="tableAppend" >
   <thead>
     <tr>
      <th align="left"><?php echo $table_name; ?></th>
      <th   align="Right"> <a href="javascript:void(0);" id="addCF"  >Add Row</a> </th>
     </tr>
   </thead>
</table>

点击Add Row，它会在以下Javascript代码的帮助下在相应的表格中生成一行：

$('.box-table-green a').click(function (evt) {
             evt.preventDefault();


    var rowHtml = '<tr  align="center"><td><input type="text"  name="vsname[]" value="" /></td><td><input type="text" name="foreRengoring[]" id="foreRengoring" class="fieldWidthBefore80" /><img src="images/cancel_icon.png" style="float:right" width="24" height="24" class="deleteRowNew" /></td></tr>'; 

      $(this).parents('.box-table-green').append(rowHtml);
     return false;
 });

如果我只留下上面的Jquery代码，那么它只附加一行。但是当我添加下面的删除代码时，它会附加两行，我不知道为什么。

$("#tableAppend").on('click', ".deleteRowNew", function () { 
 $(this).closest('tr').remove();
 });

我尝试了类名，并直接点击图片。直接$("img").click，它只删除在页面中预先加载的行。并且不适用于使用上述追加行代码动态创建的行。

需要帮助，因为我花了很多时间在这件事上，而且我无法弄清楚我做错了什么。

Answer 1

更新了小提琴：http://jsfiddle.net/lotusgodkk/GCu2D/12/

你在html和js中遇到了一些问题。在HTML中，您错过了<tr>标记。在js中你附加了输入相同Id的html。切勿在元素上使用相同的ID。所以我从Input中删除了ID属性。代码正在按预期工作。

$(document).ready(function () {
$('.box-table-green a').click(function (evt) {
    evt.preventDefault();
    var rowHtml = '<tr  align="center"><td><input type="text"  name="vsname[]" value="" /></td><td><input type="text" name="foreRengoring[]" class="fieldWidthBefore80" /><img src="images/cancel_icon.png" style="float:right" width="24" height="24" class="deleteRowNew" /></td></tr>';
    $(this).parents('.box-table-green').append(rowHtml);
    return false;
});
$("#tableAppend").on('click', ".deleteRowNew", function () {
    $(this).closest('tr').remove();
  });
});

Answer 2

我无法弄清楚为什么我的网页不能正常工作，应该有它的方式。但我通过另一种方法解决了我的执行流程。我想这里不能粘贴整个页面，代码（这里提供）工作正常。

我不知道如何关闭这个问题，请仔细考虑这个问题。因为对某人发表评论将毫无用处。

由于

Jquery表追加

2 个答案: