可編輯表格不能正常工作

我製作了一個表格，您可以在其中添加文本並對其進行編輯。但是，如果添加三行以上，它會卡住而不再工作。可編輯表格不能正常工作

的誤差來自這裏：的document.getElementById（ 'VDA' + Z） - 閱讀進度（ '咔噠'，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>

來源

2016-06-24 josh

我試過小提琴，不能重現問題。我可以添加儘可能多的行，因爲我喜歡... – MattDiMu

轉移到jsfiddle的JavaScript部分 –

同樣在這裏，我試着JSFiddle，它的工作原意。你可以檢查你的控制檯，讓我們知道它是否顯示任何錯誤？ –

下面的行刪除所有聽衆：

的document.getElementById（「按鈕」）的innerHTML = 的document.getElementById（「按鈕。「）.innerHTML + total;
document.getElementById（'vda'+ z）.addEventListener（'click'， doSomething）;

使用這個代替：

變種的div =使用document.createElement（ 'DIV'）;
div.innerHTML = total;
document.getElementById（「buttons」）。appendChild（div）;

來源

2016-06-24 12:26:25

可編輯表格不能正常工作

回答

相關問題