Question

我在页面上创建了两个表。我希望当用户点击表格行时，该行的数据将被复制到另一个表格。

<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相当新，所以请考虑一下。

Answer 1

不确定你想要什么。但是如果要存储数据，可以使用数组存储它。（你可以使用任何数据结构，我使用它们很简单）

检查以下代码，我使用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

Answer 2

添加此脚本（使用Jquery）

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

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

Answer 3

我会建议：

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

Answer 4

这样的东西？

$(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/

使用Javascript将Row从一个表复制到另一个表

4 个答案: