2
我最近開始學習Javascript。我目前正在做一些項目，並遇到了一個問題。我正在創建聯繫人管理器頁面，其想法是用戶輸入名稱，電子郵件和電話號碼，這些名稱將顯示在下面動態創建的HTML表格中。有三個按鈕。第一個按鈕保存信息，第二個清除新用戶的輸入字段，第三個刪除localStorage信息。當您單擊表格中的一行時，該行中的信息將顯示在上面的輸入字段中。當你點擊HTML表格中的一行時，一切正常，但是當我點擊使用JavaScript創建的表格中的行時，它不起作用。兩個表具有相同的結構，ID和類，但另一個不起作用。 JavaScript的信息顯示在dvcontainer div中。動態創建Javascript表問題
下面的代碼
(function(){
var Person = {
Name: "",
Email: "",
MobileNo: ""
};
var applogic = {
clearuielements: function() {
var inputs = document.getElementsByClassName("c1");
for (i = 0; i < inputs.length; i++) {
inputs[i].value = "";
}
},
saveitem: function() {
var lscount = localStorage.length;
var inputs = document.getElementsByClassName("c1");
Person.Name = inputs[0].value;
Person.Email = inputs[1].value;
Person.MobileNo = inputs[2].value;
localStorage.setItem("Person_" + lscount, JSON.stringify(Person));
location.reload();
},
loaddata: function() {
var datacount = localStorage.length;
if (datacount > 0) {
var render = "<table id='t_id' border='1'>";
render += "<tr><th>Name</th><th>Email</th><th>Phone</th></tr>";
for (i = 0; i < datacount; i++) {
var key = localStorage.key(i);
var person = localStorage.getItem(key);
var data = JSON.parse(person);
render += "<tr><td class='row_s edit_row'>" + data.Name + "</td>";
render += "<td class='row_t'>" + data.Email + "</td>";
render += "<td class='row_d'>" + data.MobileNo + "</td></tr>";
}
render+="</table>";
dvcontainer.innerHTML = render;
}
},
clearstorage: function() {
var storagecount = localStorage.length;
if (storagecount > 0) {
for (i = 0; i < storagecount; i++) {
localStorage.clear();
}
}
window.location.reload();
}
};
var btnsave = document.getElementById('btnsave');
btnsave.addEventListener('click', applogic.saveitem, false);
var btnclear = document.getElementById('btnclear');
btnclear.addEventListener('click', applogic.clearuielements, false);
var btnclearstorage = document.getElementById('btnclearstorage');
btnclearstorage.addEventListener('click', applogic.clearstorage, false);
window.onload = function() {
applogic.loaddata();
};
})();
var edit_row = document.querySelectorAll('#t_id .edit_row');
for(var i=0; i<edit_row.length; i++) {
edit_row[i].addEventListener('click', function(e){
var tr_parent = this.parentNode;
document.getElementById('e_site').value = tr_parent.querySelector('.row_s').innerHTML;
document.getElementById('e_title').value = tr_parent.querySelector('.row_t').innerHTML;
document.getElementById('e_desc').value = tr_parent.querySelector('.row_d').innerHTML;
}, false);
}<!DOCTYPE html>
<html>
<head>
<title>nesto</title>
</head>
<body>
<form action="#" method="post" id="edit_form">
Person Name:<input name="e_site" id="e_site" type="text" class="c1" /><br/>
Email:<input name="e_title" id="e_title" type="text" class="c1" /><br/>
Mobile No:<input name="e_desc" id="e_desc" type="text" class="c1"/><br/>
</form>
<td><input id="btnsave" type="button" value="Save" /></td>
<td><input id="btnclear" type="button" value="Clear" /></td>
<td><input id="btnclearstorage" type="button" value="Clear Storage" /></td>
<div id="dvcontainer"></div>
<!--
<table id="t_id" border="1">
<tr>
<td class="row_s edit_row">yyyy</td>
<td class="row_t">yyyy</td>
<td class="row_d">yyyyy</td>
</tr>
</table>
-->
<script type="text/javascript" src="funkcije.js"></script>
</body>
</html>
我沒有看到任何表，當我運行的代碼片段。 – John
您必須在加載數據時動態添加綁定。 –
最有可能發生的事情是在加載其他表之前將您的事件偵聽器添加到表中。因此，在創建動態表後，您需要添加事件偵聽器。 – Adjit