可编辑表不起作用答案

【问题标题】：Editable table not working可编辑表不起作用
【发布时间】：2016-06-24 20:38:20
【问题描述】：

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

错误来自这里： 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>

【问题讨论】：

我试过小提琴，但无法重现该问题。我可以添加尽可能多的行...
在 jsfiddle 中将 javascript 转移到 javascript 部分
同样，我尝试了 JSFiddle，它按预期工作。你能检查你的控制台，如果它显示任何错误，请告诉我们？
错误来自这里：document.getElementById('vda' + z).addEventListener('click', doSomething); document.getElementById('cvda' + z).addEventListener('click', doSomething2);它只是将事件侦听器添加到添加的最后一行，因此如果添加多行。非最后一行没有有效的编辑按钮。

标签： javascript html

【解决方案1】：

以下行删除所有侦听器：

document.getElementById("buttons").innerHTML = document.getElementById("buttons").innerHTML + total;
document.getElementById('vda' + z).addEventListener('click', 做某事）；

改用这个：

var div = document.createElement('div');
div.innerHTML = 总计；
document.getElementById("buttons").appendChild(div);

【讨论】：