Как остановить клонирование текста, введенного внутри элемента при использовании .clone() в jquery

#javascript #jquery

Вопрос:

У меня есть запрос на создание таблицы с добавлением «динамических» строк при нажатии клавиши TAB в последнем столбце строки.

В конце концов я создал структуру в HTML

 <table id="some_table">
<tr>
    <td>
        <input type="text" />
    </td>
    <td>
        <input type="text" />
    </td>
    <td>
        <input type="text" />
    </td>
</tr>

И затем я использовал этот простой код для JS

 $('#some_table').on('keydown', 'input', function (e) {
    var keyCode = e.keyCode;
    if (keyCode !== 9) return;
    var $this = $(this),
        $lastTr = $('tr:last', $('#some_table')),
        $lastTd = $('td:last', $lastTr);
    if (($(e.target).closest('td')).is($lastTd)) {
        $lastTr.after($lastTr.clone());
    }
});

И я добавил источник сценария

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Что это на самом деле делает, когда вы вводите данные и нажимаете TAB на последнем, clone() клонирует последнюю строку С ДАННЫМИ, и я хочу этого избежать. Я хотел бы просто клонировать пустые столбцы для новой строки, фактически, создать новую строку с той же структурой, в которой нет никаких данных.

Как это можно сделать?

Я добавил к нему ссылку jsfiddle

1. Проверьте mustache Это механизм шаблонов, вы можете определить базовый шаблон, а затем просто добавить его, когда вам это нужно. Или это невозможно?

2. Почему я этого не понимаю?

Ответ №1:

Я только что добавил это в ваш код

     $('tr:last', $('#some_table')).find('td > input').each(function(index, value){
    $(value).val('')
  })

Взгляните на
https://jsfiddle.net/ctxmb29q /

Это то, что вы хотели?