JQuery 数据表添加新行

Question

我正在创建一个注册页面，如果有人愿意，最多可以在其中注册 20 个其他人。所以我有这些文本框:

First Name: <br/><input type="text" name="fname" id="fname" /> <br/>
Last Name: <br/><input type="text" name="lname" id="lname" /> <br/>
Email: <br/><input type="text" name="email" id="email"/> <br/>

这是我的 html 表格，其中包含我对 DataTables 的 JQuery 初始化:

<div id="tables">
    <table id="table" border="1">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
    </table>
</div>

$('#reg_more').dataTable({
    "bLengthChange": false,
    "bInfo": false
});

现在我想放置一个添加按钮，以便用户可以输入名字和姓氏，然后输入电子邮件并点击添加，它就会被放入表格中。我该怎么做呢？

Answer 1

$(document).ready(function() {
    $('#example').dataTable();
    $('#addbtn').click(addrow);
} );

function addrow() {
    $('#example').dataTable().fnAddData( [
        $('#fname').val(),
        $('#lname').val(),
        $('#email').val() ] );

}

您需要在按钮点击时调用 addrow()。

在您的 html 代码中添加此按钮

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