jQuery Очистить добавленное текстовое поле - PullRequest
Новая
       19

jQuery Очистить добавленное текстовое поле

0 голосов
/ 22 мая 2011

Вот код: 

function newRow(){
    var sourceRow = $('table#listings tr.row').html();
    $('table#listings > tbody:last').append('<tr>'+sourceRow+'</tr>');
    return false;
}

HTML: 

<table id='listings'>
<tbody>
    <tr>
        <td><input type='text' name='entry[]' value='ENTRY1' />
    </tr>
</tbody>
</table>

Код работает, но как автоматически очистить вновь добавленное текстовое поле строки? Потому что он копирует все, что есть в предыдущем ряду. Я попробовал: 

var sourceRow = $('table#listings tr.row').html();
var x = $(sourceRow).('input').children().val(''); //problematic line
$('table#listings > tbody:last').append('<tr>'+sourceRow+'</tr>');
return false;

но не сработало.

Я хочу получить вывод: 

<table id='listings'>
<tbody>
    <tr>
        <td><input type='text' name='entry[]' value='ENTRY1' />
    </tr>
    <tr>
        <td><input type='text' name='entry[]' value='' />
    </tr>
</tbody>
</table>

Ответы [ 3 ]

2 голосов
/ 22 мая 2011

Как насчет этого?

Вы не должны сериализовать HTML в строку, если вы можете избежать этого. Вы хотите клонировать элемент.

Также кэшируйте селектор к таблице. Это означает, что вам нужно выбрать его только один раз. 

function newRow(){
    var table = $('table#listings'),
        newRow = table.find('tr:first').clone();

    newRow.find(':input').val('');
    table.find('> tbody:last').append(newRow);
}
1 голос
/ 22 мая 2011

Это может сработать: 

$('table#listings > tbody:last > tr:last input').val('')
0 голосов
/ 22 мая 2011

У вас были некоторые проблемы с вашими селекторами ... а затем то, что вы делали со своими селекторами.:) 

function newRow(){
   var sourceRow = $('table#listings tr').html();
   var destRow = $('<tr>'+sourceRow+'</tr>');
   destRow.find('input').val('');
   $('table#listings > tbody:last').append(destRow);
   return false;
}

Я сделал его немного более атомарным, чтобы его было легче читать.

Fiddle

Добавлено: обратите внимание, что в вашем примере нет ничего с классом 'row'.

...