Question

我一直在与这个问题作斗争一段时间，但由于我没有经验丰富的jQuery，我需要一些帮助。

简而言之，我使用按钮添加和删除表格中的行。

我设法让这个.on（）事件为动态生成的元素触发，但Pattern pattern = Pattern.compile("((\\d\\,(?=\\d))|(\\d\\-(?=\\d))|\\d)+");似乎只对第一个元素起作用，然后再添加其他元素。在添加新行后，它会停止工作的原因是什么？

从我在其中使用其他示例看到的就是我正在使用正确的事件委派...

这是一个JSFiddle概述到目前为止我所得到的：https://jsfiddle.net/vsgvLuam/4/

Answer 1

这将有效：jsFiddle

不要单独附加行和单元格，而是一次性附加它们，以便知道<td>位于行内（<tr>）

Answer 2

这一行是问题所在。 append()，不会返回添加的元素，而是返回添加它的元素。

$('#printerOptions').find('tbody:last').append('<tr>')

您需要获取新的tr，然后附加其余内容，以便在tr中添加列。

$('#printerOptions').find('tbody:last').append('<tr>').find('tr:last')

然后添加下一个项目。

DEMO

更好的解决方案是使用带有新tr的变量并稍后追加，您可以使用this。

Answer 3

我在你的代码上尝试了什么：

  $("#printerOptions").on("click", ".addOption", function(event) {
  $('#printerOptions').find('tbody:last').append('<tr><td><button style=" width: 50%;" class="btn btn-primary removeOption">Remove Rule</button></td><td><select style="width: 100%;" autocomplete="off" form="tablequery" name="this[]"><option value="Store ID">Store ID</option><option value="Item Name">Item Name</option><option value="Item Code">Item Code</option><option value="Shipping Type">Shipping Type</option></select></td><td><input style="width: 100%; box-sizing:border-box;" name="that[]" form="tablequery" value=""></td><td><select style="width: 100%;" autocomplete="off" form="tablequery" name="printer[]"><option value="40569">Officejet_Pro_8600</option><option value="40570">_192_168_1_65</option><option value="40571">AdobePDF9</option><option value="142555">_192_168_2_64</option><option value="142556">Pantum_P3000_</option><option value="142621">Oce_ColourWave_700</option><option value="147124">_192_168_1_62</option></select></td></tr>');

});

$（本）.closest（＆＃34; TR＆＃34）。除去（）;不适用于新元素

3 个答案: