jQuery 不能用 html 之前的 clone() 和 appendTo()
jQuery can't clone() and appendTo() with html before
人们来到这里是因为我的代码实际上不起作用,它基本上复制了一行并为新条目创建了新行。我正在使用 clone()
和 appendTo()
。
但是如果你删除 html 的最后一部分它会起作用,好像如果有一个新的标签它就会出现语法错误,请有人帮我解决这个问题吗?
<table>
<tr>
<td>Hello world!</td>
</tr>
</table>
谢谢!
您的 fiddle
中几乎没有问题
1:选择克隆的行元素错误
2: 父元素应该是 table 但选错了。
您可以使用以下修改后的代码来克隆和附加行。
$("#clone").click(function() {
i++;
$("#remove").removeAttr("disabled");
var parent = $("#data");
var tr = $("#data tr:last");
console.log(tr);
var e = tr.clone().appendTo(parent);
$(e).find("[type=text],[type=hidden]").each(function() {
$(this).val('');
});
});
已更新 Fiddle:https://jsfiddle.net/363m6dsy/6/
更改选择器并使用.after()
追加
var tr = $("#parent:last");
var e = $("#parent").clone();
$(tr).after(e);
完整 JS
$(document).ready(function() {
var i = 1;
$("#clone").click(function() {
i++;
$("#remove").removeAttr("disabled");
var tr = $("#parent:last");
var e = $("#parent").clone();
$(tr).after(e);
console.log(e);
$(e).find("[type=text],[type=hidden]").each(function() {
$(this).val('');
});
});
$("#remove").click(function() {
var tr = $("#parent:last-child");
if (i > 1) {
i--;
tr.remove();
}
if (i == 1) {
$("#remove").attr("disabled", "true");
}
});
});
只需克隆行 $("#parent").clone()
然后附加它 $('#data').append(e);
就像:
$("#clone").click(function() {
i++;
$("#remove").removeAttr("disabled");
var e = $("#parent").clone();
$(e).find("[type=text],[type=hidden]").each(function() {
$(this).val('');
});
$('#data').append(e);
});
希望这对您有所帮助。
$(document).ready(function() {
var i = 1;
$("#clone").click(function() {
i++;
$("#remove").removeAttr("disabled");
var e = $("#parent").clone();
$(e).find("[type=text],[type=hidden]").each(function() {
$(this).val('');
});
$('#data').append(e);
});
$("#remove").click(function() {
var tr = $("#parent:last-child");
if (i > 1) {
i--;
tr.remove();
}
if (i == 1) {
$("#remove").attr("disabled", "true");
}
});
});
body {
width: 700px;
}
table {
width: 100%;
}
input[type="text"] {
width: 130px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="data" name="data">
<tr>
<td colspan="9">
<input type="button" value="Add" name="clone" id="clone">
<input type="button" value="Remove" name="remove" id="remove">
</td>
</tr>
<tr align="center">
<td rowspan="2">N°</td>
<td rowspan="2">Activity</td>
<td rowspan="2">Field1</td>
<td rowspan="2">Resources</td>
<td colspan="2">Dates</td>
<td rowspan="2">Field2</td>
<td rowspan="2">Date 1</td>
<td rowspan="2">Status</td>
</tr>
<tr align="center">
<td>Start Date</td>
<td>End Date</td>
</tr>
<tr name="parent" id="parent">
<td align="center">
<input id="val[]" name="val[]" type="text" value="1" required>
<input id="val[]" name="val[]" type="hidden" value="13256">
</td>
<td align="center">
<input id="val[]" name="val[]" type="text" value="2" required>
</td>
<td align="center">
<input id="val[]" name="val[]" type="text" value="3" required>
</td>
<td align="center">
<input id="val[]" name="val[]" type="text" value="4" required>
</td>
<td align="center">
<input id="val[]" name="val[]" type="text" value="5" required>
</td>
<td align="center">
<input id="val[]" name="val[]" type="text" value="6" required>
</td>
<td align="center">
<input id="val[]" name="val[]" type="text" value="7" required>
</td>
<td align="center">
<input id="val[]" name="val[]" type="text" value="8" required>
</td>
<td align="center">
<input id="val[]" name="val[]" type="text" value="9" required>
</td>
</tr>
</table>
<table>
<tr>
<td>Hello world!</td>
</tr>
</table>
人们来到这里是因为我的代码实际上不起作用,它基本上复制了一行并为新条目创建了新行。我正在使用 clone()
和 appendTo()
。
但是如果你删除 html 的最后一部分它会起作用,好像如果有一个新的标签它就会出现语法错误,请有人帮我解决这个问题吗?
<table>
<tr>
<td>Hello world!</td>
</tr>
</table>
谢谢!
您的 fiddle
中几乎没有问题1:选择克隆的行元素错误
2: 父元素应该是 table 但选错了。
您可以使用以下修改后的代码来克隆和附加行。
$("#clone").click(function() {
i++;
$("#remove").removeAttr("disabled");
var parent = $("#data");
var tr = $("#data tr:last");
console.log(tr);
var e = tr.clone().appendTo(parent);
$(e).find("[type=text],[type=hidden]").each(function() {
$(this).val('');
});
});
已更新 Fiddle:https://jsfiddle.net/363m6dsy/6/
更改选择器并使用.after()
追加
var tr = $("#parent:last");
var e = $("#parent").clone();
$(tr).after(e);
完整 JS
$(document).ready(function() {
var i = 1;
$("#clone").click(function() {
i++;
$("#remove").removeAttr("disabled");
var tr = $("#parent:last");
var e = $("#parent").clone();
$(tr).after(e);
console.log(e);
$(e).find("[type=text],[type=hidden]").each(function() {
$(this).val('');
});
});
$("#remove").click(function() {
var tr = $("#parent:last-child");
if (i > 1) {
i--;
tr.remove();
}
if (i == 1) {
$("#remove").attr("disabled", "true");
}
});
});
只需克隆行 $("#parent").clone()
然后附加它 $('#data').append(e);
就像:
$("#clone").click(function() {
i++;
$("#remove").removeAttr("disabled");
var e = $("#parent").clone();
$(e).find("[type=text],[type=hidden]").each(function() {
$(this).val('');
});
$('#data').append(e);
});
希望这对您有所帮助。
$(document).ready(function() {
var i = 1;
$("#clone").click(function() {
i++;
$("#remove").removeAttr("disabled");
var e = $("#parent").clone();
$(e).find("[type=text],[type=hidden]").each(function() {
$(this).val('');
});
$('#data').append(e);
});
$("#remove").click(function() {
var tr = $("#parent:last-child");
if (i > 1) {
i--;
tr.remove();
}
if (i == 1) {
$("#remove").attr("disabled", "true");
}
});
});
body {
width: 700px;
}
table {
width: 100%;
}
input[type="text"] {
width: 130px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="data" name="data">
<tr>
<td colspan="9">
<input type="button" value="Add" name="clone" id="clone">
<input type="button" value="Remove" name="remove" id="remove">
</td>
</tr>
<tr align="center">
<td rowspan="2">N°</td>
<td rowspan="2">Activity</td>
<td rowspan="2">Field1</td>
<td rowspan="2">Resources</td>
<td colspan="2">Dates</td>
<td rowspan="2">Field2</td>
<td rowspan="2">Date 1</td>
<td rowspan="2">Status</td>
</tr>
<tr align="center">
<td>Start Date</td>
<td>End Date</td>
</tr>
<tr name="parent" id="parent">
<td align="center">
<input id="val[]" name="val[]" type="text" value="1" required>
<input id="val[]" name="val[]" type="hidden" value="13256">
</td>
<td align="center">
<input id="val[]" name="val[]" type="text" value="2" required>
</td>
<td align="center">
<input id="val[]" name="val[]" type="text" value="3" required>
</td>
<td align="center">
<input id="val[]" name="val[]" type="text" value="4" required>
</td>
<td align="center">
<input id="val[]" name="val[]" type="text" value="5" required>
</td>
<td align="center">
<input id="val[]" name="val[]" type="text" value="6" required>
</td>
<td align="center">
<input id="val[]" name="val[]" type="text" value="7" required>
</td>
<td align="center">
<input id="val[]" name="val[]" type="text" value="8" required>
</td>
<td align="center">
<input id="val[]" name="val[]" type="text" value="9" required>
</td>
</tr>
</table>
<table>
<tr>
<td>Hello world!</td>
</tr>
</table>