javascript - 在 div 中添加 且 Javascript 未显示在表格中

Question

我有一个 HTML 表格，如下所示:

    <table>
        <tr>
            <th>Name</th>
            <th>Class</th>
            <th>Reg ID</th>
        </tr>
        <tr>
            <td>Alex</td>
            <td>VII</td>
            <td>56733</td>
        </tr>

        <div id="addfield"></div>

    </table>    

<input type="button" value="add" id="add_more_fields" />

还有 jquery:

$(document).ready(function(){
    var html = '';
    $('#add_more_fields').click(function(){
        html += '<tr>';
        html += '<td>Steve</td>';
        html += '<td>X</td>';
        html += '<td>87777</td>';
        html += '</tr>';

        $('#addfield').append(html);

    });
});

我想添加<tr>由 javascript 生成并位于表内。但是当我单击按钮时，输出显示在表外!我怎样才能将其显示在表？

DEMO Here

Answer 1

它不起作用，因为 table 内的 div 是无效的 HTML 结构。将行追加到表本身。

此外，您没有清除字符串 html。这会导致多行。

$('#add_more_fields').click(function () {
    var html = ''; //declare string inside function
    html += '<tr>';
    html += '<td>Steve</td>';
    html += '<td>X</td>';
    html += '<td>87777</td>';
    html += '</tr>';
    $('table').append(html);
});

Updated fiddle here.