jquery插件dataTable. 添加一行记录---触发click()事件

最新推荐文章于 2022-05-18 13:30:55 发布

朱智文

最新推荐文章于 2022-05-18 13:30:55 发布

阅读量1.4w

点赞数 1

分类专栏： datatable

本文链接：https://blog.youkuaiyun.com/u014236541/article/details/52414432

版权

datatable 专栏收录该内容

1 篇文章

订阅专栏

在jQuery的DataTable插件中，可以通过`row.add()`方法来动态添加新的记录。例如，以下代码将添加一条包含姓名、职位等信息的记录，并使用`draw()`方法更新表格。然后，可以进一步为新添加的行绑定click事件以实现交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

n<a target=_blank href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css</a>
<span style="font-size:24px;">js:</span>
$(document).ready(function() {
    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( false );
 
        counter++;
    } );
 
    // Automatically add a first row of data
    $('#addRow').click();

} );

<span style="font-size:24px;">html:</span>引入：<a target=_blank href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css</a>

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
                <th>Column 5</th>
            </tr>
        </tfoot>
    </table>

指定列：

var table = $('#example').DataTable();

table.row.add( {
        "name":       "Tiger Nixon",
        "position":   "System Architect",
        "salary":     "$3,120",
        "start_date": "2011/04/25",
        "office":     "Edinburgh",
        "extn":       "5421"
    } ).draw();