Question

Here’s the code:

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>

The code works but how will i automatically clear the newly appended row textbox? Because it copies whatever the previous row has. I tried:

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;

but didn’t work.

I want to have an ouput:

<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>

Answer 1

This might work:

$('table#listings > tbody:last > tr:last input').val('')