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

    });
});

我想将javascript生成的<tr>添加到表格中。但是当我点击按钮时，输出显示在表格外面！我怎样才能在里面显示它桌子？

DEMO Here

Answer 1

尝试使用tbody代替#addfield，{/ p>

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

<强> SCRIPT

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

Demo

Answer 2

它无效，因为div中的table是无效的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.

Answer 3

追加内表

$('#add_more_fields').on('click',function(){
    html += '<tr>';
    html += '<td>Steve</td>';
    html += '<td>X</td>';
    html += '<td>87777</td>';
    html += '</tr>';
    $('table').append(html);//If you have more table then use id for table to append
});

Answer 4

你不能在桌子里面有一个div。你要做的就是将id放在桌子上并删除div。

<table id='addfield'>

在一个div内添加Javascript没有显示在表中

4 个答案: