EDITED

Question

情况如下：

我正在使用jquery插件在表中添加行。表格顶部有（+）按钮。如果单击（+）按钮，它将直接向表中添加1行。当我在页面中使用1个表时，它运行完美。但是，如果我使用2个或更多表，当我单击（+）按钮时，所有表（不仅是我刚刚单击的表）也会添加1行。当我检查.js代码添加行时：

var tabularInput = $(this);
$(settings.addInput).click(function(event) {
        if(settings.limit == 0 || tabularInput.find("tbody > tr").length < settings.limit) {
            if(settings.beforeAdd == null || settings.beforeAdd(tabularInput)) {
                var tbody = tabularInput.find("tbody");

                alert(tabularInput.id);

                var newRow = $(settings.rowTemplate).clone();
                tbody.append(newRow);

                newRow.find(":input").each(function() {
                    $(this)
                        .attr("id", $(this).attr("id").replace(/\___template__\_/, "_" + rowCount + "_"))
                        .attr("name", $(this).attr("name").replace(/\[__template__\]/, "[" + rowCount + "]"));
                });

                tabularInput.find(settings.removeInput).show();
                if(settings.limit != 0 && tabularInput.find("tbody > tr").length >= settings.limit) {
                    tabularInput.find(settings.addInput).hide();
                }

                rowCount++;
                if(settings.afterAdd) settings.afterAdd(tabularInput, newRow);
            }
        }
        event.preventDefault();
    });

我添加了alert（tabularInput.id）代码来查看id，但是它表示未定义。现在，这是HTML表格：

<table class="jtabularinput" id="yw0">
 <thead>
  <th>Nama Depan</th>
  <th>Nama Tengah</th>
  <th>Nama Belakang</th>
  <th><a class="input-add" title="Click to add a new row" href="#">Add</a></th>
 </thead>
 <tbody>
  <tr>
   <td><input name="Pengarang[0][nama_depan]" id="Pengarang_0_nama_depan" type="text" maxlength="16" /></td>
   <td><input name="Pengarang[0][nama_tengah]" id="Pengarang_0_nama_tengah" type="text" maxlength="16" /></td>
   <td><input name="Pengarang[0][nama_belakang]" id="Pengarang_0_nama_belakang" type="text" maxlength="16" /></td>
   <td style="text-align:center">
    <a class="input-remove" title="Click to remove this row" href="#">Remove</a>
   </td>
  </tr>
  </tbody>
</table>

任何人都有解决方案或洞察它出错的地方？非常感谢

EDITED

发现错误的地方。我改变了：

$(settings.addInput).click(function(event) {..}

是：

tabularInput.find(settings.addInput).click(function(event) {..}

这种方式只会取相应的表并添加其行。现在它完美无缺。感谢所有提出的解决方案以及您的关心帮助我解决问题=）

Answer 1

tabularInput是一个jquery包装对象，如果你想要它的ID，你需要向它询问jquery或者放到dom元素本身：

1）tabularInput.attr('id')

2）tabularInput[0].id

此插件存在多个问题，但重复是由于对范围的误解。您不能指望所有这些事件处理程序都能记住您在执行插件时定义的一些缓存对象，除非您将其作为参数传递给它们的闭包。

快速修复：

$(settings.addInput).click(function(event) {
    var tabularInput = $(this).closest('table');

Answer 2

试试这个

$(settings.addInput).click(function(event) {
    var tabularInput = $(this).closest('table.jtabularinput');
    // then the rest...

$（this）是'addInput'项（从点击处理程序中调用时）

.closest找到与选择器匹配的最接近的父级，因此在这种情况下，它是元素所在的表

Jquery仅为单击的表按钮添加行

EDITED

2 个答案: