почему последние значения строки значений повторяются для таблицы HTML

Question

У меня есть статическая таблица HTML, которая содержит одну кнопку «Добавить», и при нажатии на эту кнопку она создает новую строку, которая содержит несколько текстовых полей и он добавляет к этой таблице. Но моя проблема заключается в том, что у меня есть 3 строки, и когда я нажимаю «Добавить», мы можем создать новую строку, но значения предыдущих строк копируются в новую генерируемую строку. Вот та функция, которую я использую

    $('#btn1').click(function(){
        tr= $("#Tbl tr:last").html();
        num= $('#num').val()*1;
        first= $("#Tbl tr:last").attr('id').substr(4)*1;
        last=first+num;
        for(i=first+1;i<=last;i++) {
            var newtr= tr.replace(first,i);
            $('#Tbl').append('<tr id="txt_'+i+'">'+newtr+'</tr>');
        }   
    });

Как сделать значение Выбранное как «ABC» в поле «Выбрать» при добавлении новой строки. Я использую это утверждение, но не тренируюсь. Как я могу сделать значение выбранным

$('#Tbl tr:last :input').find('input[name="code"]').val('ABC'); 

Answer 1

Как указывает @Patrick, вы можете копировать значения из последней строки.Так почему бы не очистить их после создания нового ряда?Сделайте это после цикла for:

$('#Tbl tr:last :input').val('');

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

Поскольку вы добавляете несколько строк, почему бы не очистить их?как вы их добавляете?

for(i=first+1;i<=last;i++) {
    var newtr= tr.replace(first,i);
    $('#Tbl').append('<tr id="txt_'+i+'">'+newtr+'</tr>').find(':input').val('');
}

Это должно обрабатывать столько строк, сколько вы можете добавить.

Answer 2

Попробуйте это:

$('#btn1').click(function(){
    $('#Tbl').each(function(){
        var $table = $(this);
        // Number of td's in the last table row
        var n = $('tr:last td', this).length;
        var tds = '<tr>';
        for(var i = 0; i < n; i++){
            tds += '<td> </td>';
        }
        tds += '</tr>';
        if($('tbody', this).length > 0){
            $('tbody', this).append(tds);
        }else {
            $(this).append(tds);
        }
    });
});

Answer 3

Когда вы вводите текстовое поле, он устанавливает атрибут «значение» в HTML.Поэтому позже, когда вы копируете innerHTML предыдущей строки, он берет эти атрибуты «value» и дублирует их в новой строке.

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

var nextId = 0;
var DEFAULT_ROW_HTML = "<tr id=\"@ID@\"><td><input type=\"text\" /></td>...</tr>";
...
$("#Tbl").append(DEFAULT_ROW_HTML.replace("@ID@", nextId));

Понимаете, что я имею в виду, желе?

Answer 4

мне кажется, что когда вы делаете

tr= $("#Tbl tr:last").html(); 

, вы захватываете весь html из той же предыдущей строки (включая значения любых элементов управления внутри этой строки) и вставляете его в новую строку

Answer 5

Я не настоящий герой jQuery, но почему бы не использовать это просто?

<code>$('#Tbl tr:last').after('<tr>...</tr>')