Javascript 使用JQuery在HTML表中动态插入无法定位的行
我很难用下面的代码点击“回车”来定位新创建的行。如果我有这样的想法，我会继续点击“回车”来创建新行；但是，按两次enter键最多只能生成一个新行（来自原始HTML行）。为了调试这种情况，我使用了一个click事件监听器来控制台记录与表关联的节点，发现奇怪的是，在本机HTML的每一行之间都有文本节点；但是，这些文本节点不是随每一新行动态生成的。这些文本节点是HTML表正常运行所必需的吗Javascript 使用JQuery在HTML表中动态插入无法定位的行,javascript,jquery,dom,html-table,nodes,Javascript,Jquery,Dom,Html Table,Nodes,我很难用下面的代码点击“回车”来定位新创建的行。如果我有这样的想法，我会继续点击“回车”来创建新行；但是，按两次enter键最多只能生成一个新行（来自原始HTML行）。为了调试这种情况，我使用了一个click事件监听器来控制台记录与表关联的节点，发现奇怪的是，在本机HTML的每一行之间都有文本节点；但是，这些文本节点不是随每一新行动态生成的。这些文本节点是HTML表正常运行所必需的吗 <!DOCTYPE html> <html> <head> <
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8;charset=utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$("tr").on("keydown", "input", function(){
keyDownLocation = this.selectionStart;
});
$("tr").on("keyup", "input", function(e){
if (e.key === "Enter") {
var tempSelect = this.value.substr(this.selectionStart);
this.value = this.value.substr(0, this.selectionStart);
$(this).parent().parent().after('<tr><td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td><td class="item-td"><input class="input-item" type="text" value="' + tempSelect + '"></td></tr>');
$(this).parent().parent().next().find(".input-item").focus();
}
});
$("tr").on("click", "input", function(){
console.log($(this));
console.log($(this).parent().parent().parent()[0].childNodes);
});
});
</script>
<title>Title</title>
</head>
<body>
<table>
<thead>
<tr>
<th><input type="checkbox" name="checklist-list" class="checkbox-box"></th>
<th>Item</th>
</tr>
</thead>
<tbody>
<tr>
<td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td>
<td class="item-td"><input class="input-item" type="text" value="Artificial"></td>
</tr>
<tr>
<td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td>
<td class="item-td"><input class="input-item" type="text" value="Broken"></td>
</tr>
<tr>
<td class="checkbox-td"><input type="checkbox" name="checklist-list" class="checkbox-box"></td>
<td class="item-td"><input class="input-item" type="text" value="Casual"></td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
$（文档）.ready（函数（）{
$（“tr”）。在（“键控”、“输入”和“函数”）上{
keyDownLocation=this.selectionStart；
});
$（“tr”）。关于（“键控”、“输入”功能（e）{
如果（e.key==“输入”）{
var tempSelect=this.value.substr（this.selectionStart）；
this.value=this.value.substr（0，this.selectionStart）；
$（this.parent（）.parent（）.after（“”）；
$（this.parent（）.parent（）.next（）.find（“.input item”）.focus（）；
}
});
$（“tr”）。在（“单击”，“输入”，函数（）上{
log（$（this））；
console.log（$（this）.parent（）.parent（）.parent（）[0].childNodes）；
});
});
标题
项目
trtbodytr$("tbody").on("keydown", "tr input", function(){
$("tbody").on("keyup", "tr input", function(e){
$("tbody").on("click", "tr input", function(){
演示：问题是，
.on（）$（“#myTable”）。在（“keyup”，“tr td input”，function（）{}）上trtrtrtrtr