2015-05-04 99 views
0

我有兩個數據表。一個是「選擇表」,它有一個帶有複選框的列。選中此複選框後,行數據將添加到「預覽表」中。當該複選框未被選中時,它應該從預覽表中刪除該行。Datatables從另一個表中刪除行

我的問題是,從框中取消選中實際上擺脫了預覽表中的「所有」行。

$('#selectNodesTable tbody').on('click', 'tr #nodeToAdd', function() { 
     var row = ($(this)).closest('tr'); 
     var rowObj = nodeTable.row(row).data(); 
     console.log(rowObj); 

     if (($(this)).is(':checked')) { 
      nodePreviewTable.row.add(rowObj); 
      nodePreviewTable.draw(); 
     } else { 
      // THE BELOW STATEMENT DELETES ALL ROWS FROM THE PREVIEW TABLE 
      nodePreviewTable.row().remove(rowObj); 
      nodePreviewTable.draw(); 
     } 
    }); 
+0

看到一個ID作爲點擊事件的目標選擇器是非常可疑的,因爲ID不能在頁面中重複。也非常懷疑這兩個對象在兩個表中都是相互引用的。建議您在jsfiddle.net或plnkr.co中創建演示。可以將cdn資源用於數據表js和css – charlietfl

回答

1

這並不完全清楚你想要什麼。但是我假設你想根據複選框的點擊來回移動兩行jQuery dataTables實例。如果你有兩個表,#selectNodesTable#previewNodesTable,你可以當一個複選框被選中#selectNodesTable#previewNodesTable這樣移動行:

$('#selectNodesTable').on('click', 'input[type=checkbox]', function() { 
    if ($(this).is(':checked')) { 
     $(this).attr('checked', 'checked'); 
     tr = $(this).closest('tr'); 
     row = selectNodesTable.row(tr); 
     rowData = []; 
     tr.find('td').each(function(i, td) { 
      rowData.push($(td).html()); 
     });  
     row.remove().draw(); 
     previewNodesTable.row.add(rowData).draw(); 
    } 
}); 

通知rowData再生。這是爲了確保你通過一個複選框,實際上檢查。 row.data()將僅返回緩存的行內容,即未選中的複選框。如果你也想做opposit,因爲我認爲:

$('#previewNodesTable').on('click', 'input[type=checkbox]', function() { 
    if ($(this).not(':checked')) { 
     $(this).removeAttr('checked', 'checked'); 
     tr = $(this).closest('tr'); 
     row = previewNodesTable.row(tr); 
     rowData = []; 
     tr.find('td').each(function(i, td) { 
      rowData.push($(td).html()); 
     });  
     row.remove().draw(); 
     selectNodesTable.row.add(rowData).draw(); 
    } 
}); 

看到演示 - >http://jsfiddle.net/zwLm043e/

以上當然可以很容易地概括成一個單一的功能做取決於國家都行動點擊複選框。

相關問題