Jquery для добавления строки только для нажатой кнопки таблицы

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();
    });

Я добавил код предупреждения (tabularInput.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

try this

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

$ (this) является элементом 'addInput' (при вызове из обработчика щелчка)

.closest находит ближайший родительский элемент, соответствующий селектору, поэтомув данном случае это таблица, в которой находится элемент

Answer 2

tabularInput - это объект в jquery-обертке, если вам нужен его идентификатор, вам нужно либо запросить jquery, либо перейти к самому элементу dom:

1) tabularInput.attr('id')

2) tabularInput[0].id

Есть несколько проблем с этим плагином, но вы дублируете из-за неправильной интерпретации области видимости. Вы не можете ожидать, что все эти обработчики событий запомнят какой-то кэшированный объект, который вы определили выше, когда плагин был запущен, если вы не передадите его в их замыкание в качестве аргумента.

Быстрое исправление:

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