Jquery 表追加答案

【问题标题】：Jquery table AppendJquery 表追加
【发布时间】：2014-06-07 23:42:12
【问题描述】：

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

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

点击“添加行”，它将借助以下 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，它只会删除预加载到页面中的行。并且不适用于使用上述 Append Row 代码动态创建的行。

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

【问题讨论】：

请在发布之前格式化您的代码。阅读时眼睛很痛..
您在 html 中错过了开始标记
我从你的代码中创建了一个小提琴：jsfiddle.net/M7AgV 它似乎在那里工作正常
@rajaprabhu 下次我会处理的。感谢您的提示..:)
@IanA 我不知道出了什么问题，因为相同的代码在另一个页面中可以正常工作。谢谢你的时间。我要重构页面，希望能解决问题。

【解决方案1】：

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

您在 html 和 js 中遇到了一些问题。在 HTML 中，您错过了 <tr> 标记。在 js 中，您附加了具有相同 ID 输入的 html。切勿在元素上使用相同的 ID。所以我从输入中删除了 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();
  });
});

【讨论】：

感谢代码编辑。我在复制代码时错过了这一点。存在于实际代码中。

【解决方案2】：

我不知道为什么我的页面不能正常工作，应该是这样。但我用另一种方法解决了我的执行流程。我想这里不能粘贴整个页面，代码（这里提供）工作正常。

我不知道如何结束这个问题，请考虑关闭这个问题。因为别人评论是没用的。

谢谢

【讨论】：