使用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将行从一个表复制到另一个表

回答

相关问题