1

我正在使用 jQuery DataTables构建一个可以使用以下脚本添加和删除行的表：

添加行：

var row_count = 1; 

$(document).ready(function() {
$('#my_table').dataTable();
} );

function fnClickAddRow() {
$('#my_table').dataTable().fnAddData( [
    "<input type=\"text\" name=\"fieldA\"" + row_count + " value=\"\" />",
    "<input type=\"text\" name=\"fieldB\"" + row_count + " value=\"\" />",
    // ...
    ] );
 
row_count++;
}

如本例所示。

然后我使用另一个脚本添加行选择和删除：

var oTable;

$(document).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */
  $("#my_table tbody tr").click( function( e ) {
    if ( $(this).hasClass('row_selected') ) {
        $(this).removeClass('row_selected');
    }
    else {
        oTable.$('tr.row_selected').removeClass('row_selected');
        $(this).addClass('row_selected');
    }
});
 
/* Add a click handler for the delete row */
$('#delete').click( function() {
    var anSelected = fnGetSelected( oTable );
    if ( anSelected.length !== 0 ) {
        oTable.fnDeleteRow( anSelected[0] );
    }
} );
 
/* Init the table */
oTable = $('#my_table').dataTable( );
} );


/* Get the rows which are currently selected */
function fnGetSelected( oTableLocal )
{
  return oTableLocal.$('tr.row_selected');
}


添加行函数 (fnClickAddRow()) 与 HTML 编码的行上的删除函数一样工作正常。但是，添加到表对象的行是不可选择的，因此不可删除。我需要向我的数据数组添加什么以使添加的行可选择？

4

1 回答 1

2

要解决未应用的类，您应该使用.on()（或.live()对于 jQuery <1.7）：

// bind to currently available (and future-added) elements
$('#my_table').on('click', 'tbody tr', function(e){
  /* select code */
});

然后现有<tr>元素（以及使用添加的元素fnAddRow）将接收click绑定。

于 2013-01-22T21:58:29.060 回答