Как я могу заставить мою таблицу Dynami c создавать новые строки при вводе в форму? Прямо сейчас он создает строку, но он создает новую при каждом клике - PullRequest
Новая
       1

Как я могу заставить мою таблицу Dynami c создавать новые строки при вводе в форму? Прямо сейчас он создает строку, но он создает новую при каждом клике

1 голос
/ 22 марта 2020

привет, это моя текущая функция 

     <script>


  $(document).one('click', 'input.tr_clone_add', function() {
    var $tr    = $(this).closest('.tr_clone');
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $tr.after($clone);
});
    </script>
</head>

это html

<body>
  <table>
    <tr>
        <td>Name</td>
        <td>Location</td>
        <td>From</td>
        <td>To</td>
        <td>Add</td>
    </tr>
    <tr class="tr_clone">
        <td><input type="text" autofocus placeholder="who" name="add[]" class="tr_clone_add" ></td>
        <td><input type="text" autofocus placeholder="location" name="location" ></td>
        <td><input type="text" placeholder="Start Date" name="datepicker_start" class="datepicker"></td>
        <td><input type="text" placeholder="End Date" name="datepicker_end" class="datepicker"></td>

    </tr>

</table>
</body>

Я хочу создать новую строку при вводе данных в первое поле стол. Это делает это, но каждая буква, которую я нажимаю, создает новую строку. Как мне это остановить?

Ответы [ 3 ]

1 голос
/ 22 марта 2020 
            $(document).on('input', 'input.tr_clone_add', function() {
            if(document.getElementById("dynamictable").tBodies[0].rows.length == 
                    (this.parentNode.parentNode.rowIndex + 1)) {                         
                        var $tr    = $(this).closest('.tr_clone');
                        var $clone = $tr.clone();
                        $clone.find(':text').val('');
                        $tr.after($clone);
                }                                                                        
            });

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

0 голосов
/ 22 марта 2020

ОБНОВЛЕНИЕ

ОК, поэтому я сделал jsfiddle и получил это решение.

  1. добавил атрибут данных к элементу TR (data-cloned="false"), чтобы отслеживать, какие строки уже были клонированы (таким образом, только щелчок по самой новой строке создаст другой клон)

  2. поместил событие click в документ и использовал делегирование событий. Это позволяет нам запускать событие click для динамически добавляемых строк.

  3. добавил индекс [0] к этому назначению, чтобы сохранить разметку в нашей переменной. var thisRow = $(this).closest('.tr_clone')[0];

Итак, в основном мы создаем переменную thisRow и присваиваем ей разметку для нашей строки, по которой "щелкнули".

Затем мы используем .data(), чтобы проверить, строка уже была клонирована.

Если это так, мы ничего не делаем.

Если это не так, мы .clone() thisRow и цепочка .insertAfter(thisRow), а затем цепочка поиска / удаления для входных значений (.find('input:text').val('');)

Наконец, мы используем .data ( ), чтобы указать, что эта строка уже была клонирована ... $(thisRow).data("cloned", "true");

Ответ

Сначала .live () is удалено с jQuery 1.9, поэтому, если вы не работаете с древней кодовой базой, вы захотите проверить .on () .

Во-вторых, вы присоединяете keydown событие, поэтому при каждом нажатии клавиши будет запускаться соответствующий обработчик. Вам нужно будет создать logi c в обработчике событий для отслеживания. Лично я бы использовал click событие вместо нажатия клавиши, но это, вероятно, не имеет большого значения. 

    (function($) {
    $(function() { //document.ready

        $(document).on('click', '.tr_clone_add', function() {

            var thisRow = $(this).closest('.tr_clone')[0];

            if (!$(thisRow).data("cloned")) {

                $(thisRow).clone()
                .insertAfter(thisRow)
                .find('input:text').val('');

                $(thisRow).data("cloned", "true");

            }
        });

    });
})(jQuery);
0 голосов
/ 22 марта 2020

это потому, что вы запускаете свою функцию каждый раз, когда происходит событие «keydown», вы должны использовать функцию debounce для простого выполнения функции, когда происходит последнее событие «keydown» X миллисекунд go. 

$("input").on('keydown', debounce(function(e) {
    console.log("It works!");
}, 250));

function debounce(func, wait, immediate) {
  var timeout;

  return function executedFunction() {
    var context = this;
    var args = arguments;

    var later = function() {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };

    var callNow = immediate && !timeout;

    clearTimeout(timeout);

    timeout = setTimeout(later, wait);

    if (callNow) func.apply(context, args);
  };
};

Вы также можете использовать библиотеку debounce для jQuery, https://github.com/cowboy/jquery-throttle-debounce, но если вы хотите использовать только debounce, я не рекомендую его, потому что в библиотеке его гораздо больше, чем только этого.

работает js fiddle: https://jsfiddle.net/ewm9ovLa/1/

кредит Дэвид Уолл sh для функции debounce.

функция debounce отсюда, если вы хочу понять, что именно там происходит: https://levelup.gitconnected.com/debounce-in-javascript-improve-your-applications-performance-5b01855e086

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...