如何在现有数据表中将新行添加为html

问题描述 投票:2回答:2

这是我为我的要求创建的示例html。基本上,我想向现有数据表中添加新行,其中数据表的源是html dom表。在添加新行时,我需要先将其追加到dom表中,并且应该使用该额外的行重新初始化/重新创建数据表。

<head>

<link type="text/css" rel="stylesheet" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

</head>

<body>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>

        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
        </tbody>
    </table>


</body>


<script>

$(document).ready(function() {

    var dt = $('#example').dataTable();


    $('#example tbody').append('<tr><td>bond</td><td>abc</td><td>xyz</td><td>22</td><td>2012/03/29</td><td>$433,060</td></tr>');

    dt.destroy();

    $('#example').dataTable();

}); 
</script>   
jquery jquery-datatables
2个回答
0
投票

一旦实例化表,您将无法使用直接html标记操作添加行,请使用方法from the documentation

var t = $('#example').DataTable();
var counter = 1;

$('#addRow').on( 'click', function () {
    t.row.add( [
        counter +'.1',
        counter +'.2',
        counter +'.3',
        counter +'.4',
        counter +'.5'
    ] ).draw();

    counter++;
} );

// Automatically add a first row of data
$('#addRow').click();

0
投票

我知道这则超级老文章,但是如果有人仍在寻找答案,您可以使用以下命令轻松地做到这一点:

  1. 最简单的方法是使用rows.add传递html,包裹在jquery中并重绘表格
var dt = $('#example').dataTable();
var row = '<tr><td>bond</td><td>abc</td><td>xyz</td><td>22</td><td>2012/03/29</td><td>$433,060</td></tr>';
dt.rows.add($(row)).draw();
  1. 或您所做的,销毁表,附加html并再次重新初始化数据表(您只需要先销毁数据表,然后附加)
var dt = $('#example').dataTable();
var row = '<tr><td>bond</td><td>abc</td><td>xyz</td><td>22</td><td>2012/03/29</td><td>$433,060</td></tr>';
dt.destroy();
$('#example tbody').append(row);
dt = $('#example').dataTable();
© www.soinside.com 2019 - 2024. All rights reserved.