javascript - Jquery 分离并重新附加到另一个

Question

我正在尝试使用 jquery 从 1 个表行移动到另一个表行。
该行已分离，但未重新附加到另一个表。
我的所有表格都具有相同的列和格式。

function copyToTableTwo(id) {
  var det=$('#del' + id).detach()
  $("#del" + id).appendTo("#table2");
}

function CopyToTableThree(id) {
   $('#del' + id).detach()
   $("#del" + id).appendTo("#table3");
}

html 标记

<table class="table table-striped" id="table1">
    <tr>
        <th>
            col 1
        </th>
        <th>
            col 2
        </th>
    </tr>
    <tr id="delMyID">
        <td>my row content</td>
        <td>my row content</td>
        <td>
            <input type="button" class="btn btn-sm btn-warning delbtn" onclick="copyToTableTwo('#delMyID')" name="name" value="detach TO next Table" />
        </td>
    </tr>
</table>

Answer 1

您的函数需要是全局的，才能从内联 onclick 属性中访问，但假设它们是全局的，那么我相信问题是当您调用该函数时:

onclick="copyToTableTwo('#delMyID')"

...您传递选择器 '#delMyID'，然后在函数中获取该值并在其前面添加 '#del':

$('#del' + id)

因此，您尝试选择 $('#del#delMyID')，这当然不匹配任何元素。

只需单独使用 id 参数即可:

$(id).appendTo("#table2");

请注意，您根本不需要调用 .detach()，因为 .appendTo() 方法会移动元素。

在上下文中:

function copyToTableTwo(id) {
  $(id).appendTo("#table2");
}

table { border: thin black solid; margin-bottom: 20px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-striped" id="table1">
  <tr><th>col 1</th><th>col 2</th></tr>
  <tr id="delMyID">
    <td>my row content</td>
    <td>my row content</td>
    <td>
      <input type="button" onclick="copyToTableTwo('#delMyID')" name="name" value="detach TO next Table" />
    </td>
  </tr>
</table>
<table id="table2">
  <tr><td>This is</td><td>Table 2</td>
</table>