1

私はjQueryDataTablesを使用して、次のスクリプトを使用して行を追加および削除できるテーブルを作成しています。行の

追加：

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 に答える