Question

我有一个数据表，每行都有一个按钮，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/

Answer 1

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

不要使用重复的id属性。它会导致意外的结果，因为jQuery只会选择找到的第一个（这是预期的，因为只有一个元素具有id）。相反，为<button>提供class属性，例如“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 />");
    });
});

DEMO： http://jsfiddle.net/RPd3v/2/

复制表中的选定值并粘贴到div onclick - javascript

1 个答案: