可編輯表不起作用

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 +總計；
document.getElementById（'vda'+ z）.addEventListener（'click'，doSomething）;

改用這個：

var div = document.createElement（'div'）;
div.innerHTML =總計；
document.getElementById（“ buttons”）。appendChild（div）;

可編輯表不起作用

問題描述

1 個解決方案

解決方案1
0 2016-06-24 12:26:25

可編輯表不起作用

問題描述

1 個解決方案

解決方案1 0 2016-06-24 12:26:25

解決方案1
0 2016-06-24 12:26:25