Question

我创建了一个表格，您可以在其中添加文本并对其进行编辑。但是，如果你添加超过三行，它就会卡住而不再工作。

错误来自： document.getElementById（'vda'+ z）.addEventListener（'click'，doSomething）; document.getElementById（'cvda'+ z）.addEventListener（'click'，doSomething2）;

只添加事件监听器到最后一行添加，因此如果添加多行。最后一行没有工作编辑按钮。

我通过检查编辑和更新按钮元素来检查ID。尝试添加3行，然后单击其中一行的编辑按钮。您可以在此处查看代码以及https://jsfiddle.net/3e6d4qsv/

<!DOCTYPE html>
<html>
<head> 
<style>
  table, th, td {
      border: 1px solid black;
      border-collapse: collapse;
  }
  th, td {
      padding: 5px;
  }
</style>
</head>
<body>
<div style="display:inline-flex;">
<form id="myForm">
<input id="inptext" type="text" placeholder="Your name..."></input>
<input id="inpadress" style="margin-left: 10px;" type="text" placeholder="Your email..."></input>
</form>
<button  onclick="myFunction()"style="margin-left: 10px;" id="box">Add</button>
</div>
<br>
<div style="display: inline-flex">
<table id="tablename" style="width:80%; margin-top:15px;">
  <tr>
    <th>Name</th>
    <th>Email</th>
  </tr>
</table>
<div id="buttons" style="float:right;width: 300px; margin-top:50px;">
</div>
</div>


<script> 
var z = 1;
function myFunction() {
  var x = document.getElementById("inptext").value;
  var y = document.getElementById("inpadress").value;
  var form = document.getElementById("myForm");
  form.reset();
  document.getElementById("tablename").innerHTML = document.getElementById("tablename").innerHTML  + '<tr><td id=acvda'+ z + '>' + x + '</td><td id=zcvda' + z + '>' + y + '</td></tr>';
  var h = '<button style="margin-left:8px" class="edit" id=vda' + z + '>Edit</button>';
  var f = '<div id=zzza'+z+' style=height:10px></div>';
  var abc = '<button style="margin-left:-36px" class="update" id="cvda'+z+'">Update</button>';
  var total = h + abc + f;
  document.getElementById("buttons").innerHTML = document.getElementById("buttons").innerHTML + total;
  document.getElementById('vda' + z).addEventListener('click', doSomething);
  document.getElementById('cvda' + z).addEventListener('click', doSomething2);
  document.getElementById('cvda' + z).style.visibility='hidden';
  z =  z + 1;
}
function doSomething() {
    document.getElementById("inptext").value = document.getElementById("ac"+this.id).innerHTML;
    document.getElementById("inpadress").value = document.getElementById("zc"+this.id).innerHTML;
    document.getElementById(this.id).style.visibility='hidden';
    document.getElementById('c'+this.id).style.visibility='visible';
}
function doSomething2() {
    document.getElementById("a"+this.id).innerHTML = document.getElementById("inptext").value;
    document.getElementById("z"+this.id).innerHTML = document.getElementById("inpadress").value;
    document.getElementById(this.id).style.visibility='hidden';
    form.reset();
    var edit = this.id;
    var edit2 = edit.replace("c", "");
    document.getElementById(edit2).style.visibility='visible';
}
</script>


</body>
</html>

Answer 1

以下行删除所有侦听器：

document.getElementById（“buttons”）。innerHTML =   document.getElementById（“buttons”）。innerHTML + total;
  document.getElementById（'vda'+ z）.addEventListener（'click'，   doSomething的）;

改为使用：

var div = document.createElement（'div'）;
  div.innerHTML = total;
  的document.getElementById（ “按钮”）的appendChild（DIV）;

可编辑的表不起作用

1 个答案: