javascript - 如何使用 Javascript 向具有这种结构的表中添加行？

Question

如何使用 Javascript 向具有这种结构的表中添加行？

基本上我希望能够单击一个按钮并在表中为下面使用的每一列创建一个新行。例如，它可以是名称：新书，数量：30 等。

<table id="dynamictable">
    <tbody>
        <tr>
            <td class="name">My Favorite book</td>
            <td class="quantity">x&nbsp;20</td>
            <td class="unit_price">£8.99</td>
            <td class="total">£179.80</td>
            <td class="remove">
                <img src="image/cross.png">
            </td>
        </tr>
    </tbody>
</table>

Answer 1

var newRow = '<tr><td class="name">New Book</td>[...]</tr>'; // add all your code here
$('#dynamictable tbody').append(newRow);

应该这样做（未经测试）。

Answer 2

克隆按钮单击的第一行。填写新数据。然后将其附加到表中。

$( '#mybutton' ).click(function(){
    var tr = $('#dynamictable tr').eq(0).clone();

    tr.find('td').each(function(){
        $(this).html( 'Put Your Data Here.' );
    });

    $('#dynamictable').append(tr);


});

jsFiddle：http: //jsfiddle.net/4hrVQ/1/