使用javascript將行從一個表複製到另一個表

我在我的頁面上創建了兩個表格。我希望當用戶點擊一個表格行時，該行的數據被複制到另一個表格。使用javascript將行從一個表複製到另一個表

<div class="processor"> 
<table id="proctable"> 
    <tr class="header"> 
     <th>Description</th> 
     <th>Price</th> 
    </tr> 
    <tr class="hover"> 
     <td><span id="4770K"><a href="#">Intel Core i7 4770K 4TH GEN. 3.5GHZ 8MB CACHE MAX TURBO FREQUENCY 3.9GHZ</a></span></td> 
     <td>$320</td> 
    </tr> 
    <tr class="hover"> 
     <td><span id="4771"><a href="#">Intel Core i7 4771 4TH GEN. 3.5GHZ 8MB CACHE MAX TURBO FREQUENCY 3.9GHZ</a></span></td> 
     <td>$290</td> 
    </tr> 
    <tr class="hover"> 
     <td><span id="4770"><a href="#">Intel Core i7 4770 4TH GEN. 3.4GHZ 8MB CACHE MAX TURBO FREQUENCY 3.9GHZ</a></span></td> 
     <td>$280</td> 
    </tr> 
    <tr class="hover"> 
     <td><span id="4771"><a href="#">Intel Core i5 4670K 4TH GEN. 3.4GHZ 6MB CACHE MAX TURBO FREQUENCY 3.8GHZ</a></span></td> 
     <td>$240</td> 
    </tr> 
</table>

<div id="aside"> 
    <table id="comptable"> 
     <tr class="header"> 
      <th>Product</th> 
      <th>Price</th> 
     </tr> 
    </table> 
</div>

我已經尋找任何幫助我可以找到，但不能得到任何具體的答案

。

這裏是鏈接到代碼上的jsfiddle http://jsfiddle.net/jibranjb/LzgNd/#&togetherjs=fcgCI5QRn8

我是相當新的JavaScript和jQuery，所以請考慮這一點。

謝謝！

來源

2014-02-19 jibranjb

你能否解釋一下這個問題嗎？你什麼時候需要複製？如果你只是想複製這個將會工作$（「＃proctable tr」）。clone（）。appendTo（$（「＃comptable」）） –

檢查http://jsfiddle.net/4qFgX/1/演示 –

實際上我正在一個網頁上工作，我需要顯示點擊項目的詳細信息。 detail div包含一個ADD TO LIST按鈕。點擊該按鈕後，需要將該項目添加到其他表格中。 – jibranjb

-1

像這樣？

$(function() { // when dom is ready 

    $('#proctable tr.hover a').on('click', function(e) { // when you click on a link 
     var row = $(this).parents('tr').eq(0); // you get the direct parent of the current clicked element 
     $('#comptable').append(row); // you append this parent row in the other table 
     e.preventDefault(); // your prevent the default link action 
    }); 

});

http://jsfiddle.net/LzgNd/1/

來源

2014-02-19 08:51:58

??爲什麼有人投票-1 –

添加這個腳本（使用jQuery）

$('#proctable tr.hover').unbind('click').click(function(){ 
    $(this).clone().appendTo('#comptable'); 
    return false; 
})

http://jsfiddle.net/4qFgX/3/

來源

2014-02-19 08:56:04 user2167382

我會建議這樣的：

$('#proctable tr.hover').click(function() { 
var x = $(this)[0].outerHTML 
$('#comptable').append(x); 
});

來源

2014-02-19 09:02:17 Innovation

不確定你想要什麼。但是如果你想存儲數據，你可以使用數組來存儲它。（你可以使用任何數據結構，因爲它們很簡單）

檢查下面的代碼，我使用items數組來存儲選定的行。點擊Add to List按鈕後，所選的tr將被添加到數組中，並將顯示在相應的表格中。

var items = []; 

$(".addBtn").on("click", function() { 
    var newTr = $(this).closest("tr").clone(); 
    items.push(newTr); 
    newTr.appendTo($("#comptable")); 

});

我已經添加了Add to List按鈕，更新後的html標記會是;

<td> 
    <input class="addBtn" type="button" value="Add to List"> 
</td>

Updated Fiddle Demo

來源

2014-02-19 10:10:47

使用javascript將行從一個表複製到另一個表

回答

相關問題