Javascript Jquery-将一行从一个表复制到另一个表
我是jquery和javascript的新手,我正在尝试编写一个简单的应用程序,当我按下按钮时,将一行从一个表复制到另一个表,然后从第一个表中删除该行。我有一个DeleteRow函数可以正常工作,但是我无法让我的“DraftPlayer”函数复制行。我在网络上找到了很多解决方案,但我都没有找到正确的语法。当我完成这项工作时,您将看到表中只有第二行有DraftPlayer按钮 以下是我认为至关重要的代码片段:Javascript Jquery-将一行从一个表复制到另一个表,javascript,jquery,html,Javascript,Jquery,Html,我是jquery和javascript的新手,我正在尝试编写一个简单的应用程序,当我按下按钮时,将一行从一个表复制到另一个表,然后从第一个表中删除该行。我有一个DeleteRow函数可以正常工作,但是我无法让我的“DraftPlayer”函数复制行。我在网络上找到了很多解决方案,但我都没有找到正确的语法。当我完成这项工作时,您将看到表中只有第二行有DraftPlayer按钮 以下是我认为至关重要的代码片段: <!doctype html> <html> <head&
<!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> </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"> </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>
无标题文件
//
欢迎使用Mike的草稿应用程序
等级
球员姓名
位置
团队
再见周
1.
安东尼奥·布朗
西铁
矿井
8.
2.
胡里奥琼斯
西铁
ATL
11
等级
球员姓名
位置
团队
再见周
函数DeleteRow(o){
var p=o.parentNode.parentNode;
p、 parentNode.removeChild(p);
}
函数DraftPlayer(o){
var p=o.parentNode.parentNode;
copyTable=$(“#起草体”);
cloneRow=p.clone();
copyTable.append(cloneRow);
p、 parentNode.removeChild(p);
}
谢谢你的建议 您正在选择$(“#草稿体”)代码>在DOM中根本不存在,因此您将一无所获。您需要将t正文
添加到表中,或者需要更改选择器
<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();
}
等级
球员姓名
位置
团队
再见周
函数DraftPlayer(o){
var p=$(o).最近('tr');
copyTable=$(“#起草体”);
cloneRow=p.clone();
copyTable.append(cloneRow)
p、 删除();
}
函数删除行(o){
var p=o.parentNode.parentNode;
p、 parentNode.removeChild(p);
}
函数DraftPlayer(o){
var p=o.parentNode.parentNode;
copyTable=$(“#起草体”);
cloneRow=p.innerHTML;
//警报(克罗尼罗)
copyTable.append(“+cloneRow+”);
p、 parentNode.removeChild(p);
}
无标题文件
//
欢迎使用Mike的草稿应用程序
等级
球员姓名
位置
团队
再见周
1.
安东尼奥·布朗
西铁
矿井
8.
2.
胡里奥琼斯
西铁
ATL
11
等级
球员姓名
位置
团队
再见周
为了使用clone()函数,需要将DOM元素转换为jquery对象。
修改后的DraftPlayer()函数是:
function DraftPlayer(o) {
var p=o.parentNode.parentNode;
copyTable = $('#drafted tbody');
cloneRow = $(p).clone();
copyTable.append(cloneRow);
p.parentNode.removeChild(p);
}
建议:
您的HTML也有一些问题
修改表标记
<table id="your_id" border="1">
<tbody>
-----------
-----------
</tbody>
</table>
-----------
-----------
签出我的答案和运行t代码段可能重复谢谢!这个解决方案非常有效,非常简单。