javascript - Jquery UI 数据表 : Add row to a table with textbox as column

Question

我正在尝试向数据表中添加一行，但没有将 texbox 和 checkbox 作为列。我可以轻松添加其他列，但是带有文本框和复选框的列不知道如何添加。文本框和复选框 ID 的评估是将它们的类型附加到第一列值。我想知道实现这一目标的好方法是什么？我不想克隆一行，因为在某些情况下我的表可能没有任何数据。有什么想法吗？

这是客户端代码:

$(function () {
    var tableOpts = {
        "sPaginationType": "full_numbers",
        "sScrollY": "150px",
        "bFilter": false,
        "fnCreatedRow": function (nRow, aData, iDataIndex) {
            $(nRow).attr('id', aData[0]);          

            var txtBox = $(nRow).find("input[type=text]");   
            txtBox.attr('id', 'text-' + aData[0]);

            var checkBox = $(nRow).find("input[type=checkbox]");            
            checkBox.attr('id', 'check-' + aData[0]);
        }
    }   
    var table1 = $('#table1').dataTable(tableOpts);        
    $('#divButton').find('.toggle').on('click', function () {                 
         table1.fnAddData([4, 'Windows 7',7.1]);                          
          });
});

这是 JSFiddle

Answer 1

你可以试试这个:

$(function () {
    var tableOpts = {
        "sPaginationType": "full_numbers",
        "sScrollY": "150px",
        "bFilter": false,
        "fnCreatedRow": function (nRow, aData, iDataIndex) {
            $(nRow).attr('id', aData[0]);          

            var txtBox = $(nRow).find("input[type=text]");   
            txtBox.attr('id', 'text-' + aData[0]);

            var checkBox = $(nRow).find("input[type=checkbox]");            
            checkBox.attr('id', 'check-' + aData[0]);
        }
    }   
    var table1 = $('#table1').dataTable(tableOpts); 
    var textbox = '<input type="text" class="txtBox">';
    var checkbox = '<input type="checkbox">';
    $('#divButton').find('.toggle').on('click', function () {                 
       table1.fnAddData([table1.fnSettings().fnRecordsTotal() + 1, 'Windows 7',7.1, textbox, checkbox]);                          
    });
});

这是 FIDDLE .