jQuery-将一行从一个表复制到另一个表

debugcn 发表于 Dev

麦克风

我是jquery和javascript的新手，我试图编写一个简单的应用程序，当我按下一个按钮时，它将一个表中的一行复制到另一个表中，然后从第一个表中删除该行。我有一个可以正常工作的DeleteRow函数，但是无法获取“ DraftPlayer”函数来复制该行。我已经尝试了很多在网络上找到的解决方案，但是我无法正确地获得语法。在解决此问题时，您只会看到表格的第二行有DraftPlayer按钮。

以下是我认为很关键的代码段：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
//<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
<div>&nbsp;</div>
<p>Welcome to Mike's Draft App! </p>
<table id="players">
<table border="1">
  <tr>
    <td width="36"> Rank </td>
    <td width="141"> Player Name </td>
    <td width="52">Position </td>
    <td width="38">Team </td>
    <td width="69"> Bye Week </td>
    <td width="52"><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
  </tr>
  <tr>
    <td>1</td>
    <td>Antonio Brown</td>
    <td>WR</td>
    <td>PIT</td>
    <td>8</td>
    <td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
    <td width="103">&nbsp;</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Julio Jones</td>
    <td>WR</td>
    <td>ATL</td>
    <td>11</td>
    <td><input type="button" value="Delete" onClick="DeleteRow(this)"></td>
    <td><input type="button" value="Draft" onClick="DraftPlayer(this)"></td>
  </tr>

<table id="drafted">
<table border="1">
  <tr>
    <td width="36"> Rank </td>
    <td width="141"> Player Name </td>
    <td width="52">Position </td>
    <td width="38">Team </td>
    <td width="69"> Bye Week </td>
  </tr>
  </table>


<script>
    function DeleteRow(o) {
     var p=o.parentNode.parentNode;
         p.parentNode.removeChild(p);
    }

    function DraftPlayer(o) {
     var p=o.parentNode.parentNode;

    copyTable = $('#drafted tbody');
    cloneRow = p.clone();
    copyTable.append(cloneRow);

    p.parentNode.removeChild(p);     

    }
</script>
</body>
</html>

感谢您的任何建议！

迈拉吉·艾哈迈德（Mairaj ahmad）

您选择的$('#drafted tbody');是DOM中根本不存在的内容，因此您一无所获。您需要添加tbody到表中，或者需要更改选择器。

<table id="drafted">
 <tbody>
   <tr>
    <th width="36"> Rank </th>
    <th width="141"> Player Name </th>
    <th width="52">Position </th>
    <th width="38">Team </th>
    <th width="69"> Bye Week </th>
   </tr>
  </tbody>
</table>

function DraftPlayer(o) {
        var p = $(o).closest('tr');
        copyTable = $('#drafted tbody');
        cloneRow = p.clone();
        copyTable.append(cloneRow)
        p.remove();

    }

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。