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