Ограничить количество динамически добавляемых строк таблицы с использованием JQuery

Question

Я динамически вставляю строку в таблицу с помощью JQuery, используя клон.

$('#Clone').click(function() {

    //put jquery this context into a var
    var $btn = $(this).parent();

    //use .closest() to navigate from the buttno to the closest row and clone it
    //use clone(true) to pass events to cloned item

    var $clonedRow = $btn.closest('tr').clone(true).insertAfter($btn);  

});

Конечный пользователь будет контролировать вставку новых строк. Мне нужно ограничить количество новых строк до 5. Есть ли способ сделать это с помощью cookie или каким-либо другим методом (массив). У меня может быть несколько таблиц с собственным уникальным идентификатором, поэтому он должен работать с несколькими таблицами на странице.

Надеюсь, вы можете помочь.

Answer 1

Как насчет переменной?

function addClick(identifier, max){
  var i = 0;
  $(identifier).click(function() {
    if (i < max){
       //add row
       i++;
    } 
  }
}
addClick("#Clone", 5);

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

Answer 2

Спасибо за вашу помощь, но я нашел плагин JQuery, который делает свое дело. Это здесь ...

http://cloudgen.w0ng.hk/jquery/table.addrow.php

Answer 3

Вы также можете использовать атрибут данных в таблице

   var i = $('#tableID').data('userAddedRows');//of course you need to check there is a value and such
   i++;
   $('#tableID').data('userAddedRows',i);

Тогда просто проверьте, чтобы убедиться, что я меньше разрешенной суммы

Answer 4

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

Или другой вариант - использовать метод data () jQuery, который позволяет вам напрямую хранить данные в элементе dom. Событие click будет искать свою таблицу и обновлять данные таблицы () каждый раз, когда добавляется строка, и предотвращать дальнейшие добавления, когда оно достигает максимума.

РЕДАКТИРОВАТЬ: Исправлен код с проверкой, чтобы увидеть, если количество не определено, и удалить неправильно поставленные скобки.

$('#Clone').click(function() {
    var $btn = $(this).parent();
    if($btn.closest('table').data('theCount') == undefined) {
        $btn.closest('table').data('theCount', 0)
    }
    var currentCount = $btn.closest('table').data('theCount');

    if(currentCount < 5) {
        $btn.closest('tr').clone(true).insertAfter($btn);
        $btn.closest('table').data('theCount', currentCount + 1);
    }
});

http://api.jquery.com/data/

Answer 5

Вы можете просто посчитать количество возвращаемых элементов.

function countRows() {
  return $("#table-id tr").length + $("#table2-id tr").length; // etc, for all table ID's.
}

Или вы можете добавить специальный класс в строки, добавленные пользователем.

function countRows() {
  return $("tr.new").length;
}