Javascript 将可编辑行添加到表中

向数据表中添加行时，我遇到错误：

我想在表的顶部添加一行，然后新行中的每一列都会有一个可编辑的文本框来输入新信息。我在网上浏览了几个不同的链接，没有什么能真正接近我所寻找的。我也很新的编码，所以我可能会错过一些非常明显的东西

这是我的密码：

HTML:

数据表

数据表
名字`在这里输入代码`
姓
位置
办公室
年龄
开始日期
老虎
尼克松
系统架构师
爱丁堡
61
2011/04/25
加勒特
冬天
会计
东京
63
2011/07/25
阿什顿
考克斯
初级技术作者
旧金山
66
2009/01/12

JS:

$（文档）.ready（函数（）{
$（'#示例复选框'）。数据表({
回答：错，
columnDefs:[{
可订购：错误，
目标：0，
} ],
选择：{
风格：“多”，
选择器：“td:第一个孩子”
},
订单：[1，‘asc']，
B过滤器：是的，
bLengthChange：没错，
pagingType：“简单”，
“分页”：正确，
“搜索”：没错，
“语言”：{
“信息”：“总数”的“开始”-“结束”，
“sLengthMenu”：“每页行数：_MENU”，
“搜索”：“搜索”，
“搜索占位符”：“搜索”，
“分页”：{
“sNext”：“，
“以前的”：”
},
},
dom:
"" +
"" +
"" +
"",
});
$（'#addbtn'）。单击（addrow）；
//阿德罗
函数addrow（）{
$（“#示例复选框”）.dataTable（）.fnAddData（[
$（'#fname'）.val（），
$（'#lname'）.val（），
$（'#position'）.val（），
$（'#office'）.val（），
$（'#age'）.val（），
$（'#start'）.val（），
] );
}
//结束添加行
///选择值
$（“div.data-table-title”）.html（“数据表”）；
} );

问题在于添加行函数正在添加空值，并且没有足够的列来匹配您的定义（缺少日期列）

用这个替换addrow函数，您将看到它可以工作

function addrow() {
    $('#example-checkbox').dataTable().fnAddData( [
        'x',
        'c',
        'p',
        'l',
        'a',
        'z',
        'xyz'
    ] );
}

或者：设置columns.defaultContentOption后，任何空值或未定义的值都将替换为指定的值。在这种情况下不会显示任何警告

下面是一个正在工作的JSFIDLE：

但是，您需要解决以下问题才能正确纠正问题：

1:Jquery选择器没有获取任何数据

---

2:add row函数需要一个空字符串作为第一个值，以防止填充行选择器td。

谢谢，这很有效！我想我忘了删除一列额外的数据。。愚蠢的我。

$(document).ready(function() {
    $('#example-checkbox').DataTable({
        responsive: false,
        columnDefs: [ {
            orderable: false,
            targets:0,
        } ],
        select: {
            style: 'multi',
            selector: 'td:first-child'
        },
        order: [ 1, 'asc' ],
        bFilter: true,
        bLengthChange: true,
        pagingType: "simple",
        "paging": true,
        "searching": true,
        "language": {
            "info": " _START_ - _END_ of _TOTAL_ ",
            "sLengthMenu": "<span class='custom-select-title'>Rows per page:</span> <span class='custom-select'> _MENU_ </span>",
            "sSearch": "",
            "sSearchPlaceholder": "Search",
            "paginate": {
                "sNext": " ",
                "sPrevious": " "
            },
        },
        dom:
            "<'pmd-card-title'<'data-table-title'><'search-paper pmd-textfield'f>>" +
            "<'custom-select-info'<'custom-select-item'><'custom-select-action'>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'pmd-card-footer' <'pmd-datatable-pagination' l i p>>",
    });

    $('#addbtn').click(addrow);

    // addrow
    function addrow() {
        $('#example-checkbox').dataTable().fnAddData( [
            $('#fname').val(),
            $('#lname').val(),
            $('#position').val(),
            $('#office').val(),
            $('#age').val(),
            $('#start').val(),  
        ] );
    }
    // end addrow

    /// Select value

    $("div.data-table-title").html('<h2 class="pmd-card-title-text">Data table</h2>');

} );

function addrow() {
    $('#example-checkbox').dataTable().fnAddData( [
        'x',
        'c',
        'p',
        'l',
        'a',
        'z',
        'xyz'
    ] );
}