DataTables增加删除行, 并获取表格所有数据, 单元格单击可修改

html代码:? ?

<button id="addRow">添加一行</button>
? ? <button id="button">删除一行</button>
? ? <input type="button" onclick="getTableContent('example')" value="获取数据">
<table id="example" class="display" cellspacing="0" width="100%">
? ? ? ? ? ? <thead>
? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? <th>ID</th>
? ? ? ? ? ? ? ? ? ? <th class="Column1">Column 1</th>
? ? ? ? ? ? ? ? ? ? <th class="Column2">Column 2</th>
? ? ? ? ? ? ? ? ? ? <th class="Column3">Column 3</th>
? ? ? ? ? ? ? ? ? ? <th class="Column4">Column 4</th>
? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? </thead>
??</table>

js代码:

var table= $('#example').DataTable({
????????paging:false,
????????info:false,
? ? ? ? dom: 't',
// 单元格内单击变输入框
? ? ? ? columnDefs: [
? ? ? ? ? ? {
? ? ? ? ? ? ? ? "targets": ['Column1','Column2','Column3','Column4'],
? ? ? ? ? ? ? ? createdCell: function (cell, cellData, rowData, rowIndex,colIndex) {
? ? ? ? ? ? ? ? ? ? var aInput;
? ? ? ? ? ? ? ? ? ? $(cell).click(function () {
? ? ? ? ? ? ? ? ? ? ? ? $(this).html('<input type="text" size="16" style="width: 100%"/>');
? ? ? ? ? ? ? ? ? ? ? ? var aInput = $(this).find(":input");
? ? ? ? ? ? ? ? ? ? ? ? aInput.focus().val(cellData);
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? $(cell).on("blur", ":input", function () {
? ? ? ? ? ? ? ? ? ? ? ? var text = $(this).val();
? ? ? ? ? ? ? ? ? ? ? ? table.cell(cell).data(text)
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ],
? ? });

//增加行
? ? $('#addRow').on( 'click', function () {
? ? ? ? var array = ['','','','',''];
? ? ? ? table.row.add(array).draw();
? ? } );

? ?//选中行
? ? $('#example tbody').on( 'click', 'tr', function () {
? ? ? ? if ( $(this).hasClass('selected') ) {
? ? ? ? ? ? $(this).removeClass('selected');
? ? ? ? }
? ? ? ? else {
? ? ? ? ? ? table.$('tr.selected').removeClass('selected');
? ? ? ? ? ? $(this).addClass('selected');
? ? ? ? }
? ? } );

//删除行
? ? $('#button').click( function () {
? ? ? ? table.row('.selected').remove().draw( false );
? ? } );

? ?//删除行后重新排序
? ? table.on('order.dt search.dt',function() {
? ? ? ? table.column(0, {
? ? ? ? ? ? search: 'applied',
? ? ? ? ? ? order: 'applied'
? ? ? ? }).nodes().each(function(cell, i) {
? ? ? ? ? ? cell.innerHTML = i + 1;
? ? ? ? });
? ? }).draw();

//获取表格数据
? ? function getTableContent(tableId){
        //获取表格行数
? ? ? ? var len = table.page.info().recordsDisplay;
? ? ? ? var data = [];
? ? ? ? for(var i = 0; i < len; i++){
? ? ? ? ? ? var array = table.row(i).data();
? ? ? ? ? ? data[i] = {
? ? ? ? ? ? ? ? 'Column1':array[1],
? ? ? ? ? ? ? ? 'Column2':array[2],
? ? ? ? ? ? ? ? 'Column3':array[3],
? ? ? ? ? ? ? ? 'Column4':array[4],
? ? ? ? ? ? }
? ? ? ? }
console.log(data);
? ? }