html表值交換

我在html中創建了兩個表.. 如何通過複選框選擇行來將行從一個表移動到另一個表？任何人都可以給我一個示例JS來做到這一點。由於html表值交換

2012-04-19 Mark

你可以在這裏給你的代碼，所以我們也可以在代碼 – 2012-04-19 07:32:19

試試這個：

<script type="text/javascript"> 
function moveIt() { 
    $('#table-1 input[type=checkbox]:checked').each(function() { 
    var tr = $(this).parents('tr').get(0); 
    $('#table-2').append($(tr)); 
    }); 
} 
</script> 

<table border="1" id="table-1"> 
    <tr> 
    <td><input type="checkbox"></td> 
    <td>First</td> 
    </tr> 
    <tr> 
    <td><input type="checkbox"></td> 
    <td>Second</td> 
    </tr> 
    <tr> 
    <td><input type="checkbox"></td> 
    <td>Third</td> 
    </tr> 
</table> 

<table border="1" id="table-2"> 
</table> 

<input type="button" onclick="moveIt()" value="move selected lines from table-1 to table-2" />

不要忘記，包括jQuery的。

來源

2012-04-19 07:48:50

謝謝..它運行平穩：D – Mark 2012-04-19 09:46:29

嗨，穆罕默德先生，如果我想添加表-1中的所有行而不檢查所有選中的複選框，那該怎麼辦呢？它就像按鈕全選？ – Mark 2012-04-20 02:30:29

然後你需要將$（'＃table-1 input [type = checkbox]：checked'）更改爲$（'＃table-1 input [type = checkbox]'），所以它會匹配所有的複選框，僅限複選框 – 2012-04-20 09:57:15

這是一個TR的內容複製到另一個TR

see this fiddle

關鍵的一點是要獲得的innerHTML並將其移動到所需的部分

來源

2012-04-19 07:38:42

回答你這很好，除非它不能在IE ... – Teemu 2012-04-19 08:37:44

簡單的方法可以做到這一點使用jQuery。像這樣的東西應該可以完成這項工作。

$(function() { 
    // Bind button 
    $('#moveRows').click(moveSelectedRows); 
    // Select All-button 
    $('#selectAll').click(function() { 
     $('#table1 input[type="checkbox"]').prop("checked", true); 
    }); 
}); 

function moveSelectedRows() { 
    $('#table1 input[type="checkbox"]:checked').each(function() { 
     // Remove from #table1 and append to #table2 
     $('#table2').append($(this).closest('tr').remove()); 
     // Remove the checkbox itself 
     $(this).remove(); 
    }); 
}

HTML

<a href="#" id="selectAll">Select All</a> 

<table id="table1"> 
    <tr> 
     <td>Foo1 <input type="checkbox" /></td> 
    </tr> 
    <tr> 
     <td>Bar2 <input type="checkbox" /></td> 
    </tr> 
</table> 

<table id="table2"> 
    <tr> 
     <th>Selected rows</th> 
    </tr> 
</table> 

<a id="moveRows" href="#">Move rows</a>

來源

2012-04-19 07:47:24 sshow

我會把事件？或者我怎麼能調用jQuery函數？ – Mark 2012-04-19 09:41:24

@Mark單擊按鈕時，函數會自行調用。我會編輯更清晰。 – sshow 2012-04-19 09:53:22

感謝它，它的工作..只是我想知道的一件事。如何在不驗證所有選中的複選框（例如全選）的情況下將table1上的所有數據轉移到table2中？ – Mark 2012-04-20 02:33:22

html表值交換

回答

相關問題