javascript - 克隆数据表中的选定行？

Question

我目前能够删除选定的行，现在我想复制/克隆选定的行。有时向 DataTables 添加行可能会很棘手，因为分页不会更新，所以克隆和追加。

http://jsfiddle.net/BWCBX/30/

jQuery

var oTable;

    /* Add a click handler to the rows - this could be used as a callback */
    $("#example 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 = $('#example').dataTable( );



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

Answer 1

为了尊重 jquery 数据表的分页，克隆方法应该调用 fnAddData 函数，

$('#clone').click( function() {
        var anSelected = fnGetSelected( oTable );
        console.log(anSelected);
        var data=[];
        $(anSelected).find('td').each(function(){data.push($(this).text());});
        oTable.fnAddData( data );
    } );

http://jsfiddle.net/BWCBX/32/

您还需要添加单击侦听器以选择这些新行。

例如，

$('#clone').click( function() {
        var anSelected = fnGetSelected( oTable );
        var data=[];
        $(anSelected).find('td').each(function(){data.push($(this).html());});
        var row=oTable.fnAddData( data );//returns the index of the row added
        $(oTable.fnGetNodes(row)).click( function( e ) {
        if ( $(this).hasClass('row_selected') ) {
            $(this).removeClass('row_selected');
        }
        else {
            oTable.$('tr.row_selected').removeClass('row_selected');
            $(this).addClass('row_selected');
        }
    });
    } );

http://jsfiddle.net/BWCBX/33/

Answer 2

我使用.clone()jQuery 实现，参见：jsfiddle

$('#clone').click(function(){
        var anSelected = fnGetSelected( oTable );

        anSelected.clone().insertAfter( $("table").find("tr").last());
        $("table").find("tr").last().removeClass("row_selected");
    });

希望这有帮助