0

我有一个数据表，每一行都有一个按钮，onclick 我试图“复制”该行数据，并将其“粘贴”到另一个 div 中。

这是我的 HTML：

<table class="list">
    <tr>
        <th>Name</th>
        <th>Number</th>
    </tr>
    <tr>
        <td>Alpha</td>
        <td>10</td>
        <td>
            <button id="addValues">Add</button>
        </td>
    </tr>
    <tr>
        <td>Beta</td>
        <td>10</td>
        <td>
            <button id="addValues">Add</button>
        </td>
    </tr>
    <tr>
        <td>Charlie</td>
        <td>10</td>
        <td>
            <button id="addValues">Add</button>
        </td>
    </tr>
    <tr>
        <td>Delta</td>
        <td>10</td>
        <td>
            <button id="addValues">Add</button>
        </td>
    </tr>
</table>

<div id="selection">
    <h4>Selections</h4>

    <!-- SELECTED VALUES  -->
</div>

我一直在尝试使用：

$(function()  {
    $('addValues').click(function(){
        var content = $('tr').html();
        var newdiv = $("#selection");
        newdiv.html(content);
        $('#content').after(newdiv);
    });
  });

但是不能让它工作，有什么想法吗？

我在这里解决了这个问题 - http://jsfiddle.net/9sZaX/2/

4

1 回答 1

1

您的 jsFiddle 和/或代码有一些问题。

不要使用重复id的属性。这将导致意外结果，因为 jQuery 只会选择找到的第一个（这是意料之中的，因为应该只有一个带有 that 的元素id）。相反，给<button>saclass属性，如“addValues”，并使用这个选择器：$(".addValues")。

另外，尝试将 jsFiddle 设置为实际使用jQuery（在页面左侧设置）。

另一个重要的问题是id页面上没有带有“内容”的元素，因此.after()实际上并没有做任何事情。

以下是我将如何设置它，具体取决于您的实际要求：

HTML -

<table class="list">
    <tr>
        <th>Name</th>
        <th>Number</th>
    </tr>
    <tr>
        <td>Alpha</td>
        <td>10</td>
        <td><button class="addValues">Add</button></td>
    </tr>
    <tr>
        <td>Beta</td>
        <td>10</td>
        <td><button class="addValues">Add</button></td>
    </tr>
    <tr>
        <td>Charlie</td>
        <td>10</td>
        <td><button class="addValues">Add</button></td>
    </tr>
    <tr>
        <td>Delta</td>
        <td>10</td>
        <td><button class="addValues">Add</button></td>
    </tr>
</table>

<div id="selection">
    <h4>Selections</h4>
    <!-- SELECTED VALUES  -->
</div>

JS-

$(function () {
    $(".addValues").click(function () {
        var $this = $(this),
            myCol = $this.closest("td"),
            myRow = myCol.closest("tr"),
            targetArea = $("#selection");
        targetArea.append(myRow.children().not(myCol).text() + "<br />");
    });
});

演示：http: //jsfiddle.net/RPd3v/2/

于 2013-06-26T21:44:15.557 回答