假设我有一个表格,该表格通过在页面上填写表单并单击提交按钮来填充。
表格的最后一列是"已完成"部分,每行都有一个复选框。 单击复选框后,我想将该对象的 .done 属性从 false 更改为 true。
如何区分单击了哪个复选框并从该行更改属性?
this.addRowToTable = function() {
return "<tr id='tableRow'><td>" + this.app + "</td><td>" + this.priority + "</td><td>" + this.date + "</td><td>" + this.additionalNotes + "</td><td>" + "<input type='checkbox' class='checkApp[]' value='" + this.completed + "' />" + "</td></tr>";
};
我在 checkApp 数组中有所有复选框,但我不确定从那里去哪里?
提交表单时将调用此函数:
function addAppointment() {
if (txtApp.value == "" || txtPriority.value == "" || txtDate.value == "" || {
alert("Please fill all text fields");
} else {
var app = new Appointment(txtApp.value, txtPriority.value, txtDate.value, txtNotes.value, false);
apps.push(app);
localStorage.setItem("apps", JSON.stringify(apps));
clearUI();
}
updateTable();
updateTable() 遍历数组中的所有对象,并将它们添加到表标签之间:
for (var i = 0; i < apps.length; i++) {
var app = new Appointment(apps[i].app, apps[i].priority, expenses[i].date, apps[i].notes, false);
tblHTML += app.addRowToTable();
}
我的预约对象:
function Appointment(app, priority, date, notes, completed) {
this.app = app;
this.priority = priority;
this.date = date;
this.additionalNotes = notes;
this.completed = completed;
this.addRowToTable = function { ... };
}
首先,在HTML中,id
属性应该是唯一的。因此,请确保表行具有唯一的 ID。目前,它们都具有相同的ID tableRow
。
此外,您应该考虑在真实场景中使用诸如jQuery之类的框架/库,而不是手动创建DOM元素等。
现在回到最初的问题:如果使用 DOM API 而不是字符串连接来创建表行,则可以将自定义字段添加到表示表行的 DOM 对象中。因此,从每个表行中,您可以引用回其相应的Appointment
对象:
var row = document.createElement("tr");
row.appointment = this;
同样,您可以使用 DOM API 创建表单元格以及复选框:
addTd(row, this.app);
addTd(row, this.priority);
addTd(row, this.date);
addTd(row, this.additionalNotes);
var input = document.createElement("input");
var td = document.createElement("td");
td.appendChild(input);
row.appendChild(td);
input.setAttribute("type", "checkbox");
input.setAttribute("class","checkApp[]"); // Why checkApp[]? checkApp or check-app make more sense
input.setAttribute("value", this.completed);
其中addTd
是以下函数:
function addTd(row, innerHTML) {
var td = document.createElement("td");
td.innerHTML = innerHTML;
row.appendChild(td);
}
现在您正在使用 DOM API,您还可以轻松地将事件侦听器附加到每个复选框对象。然后在事件侦听器中,您可以获取与您所在行对应的约会的引用已更改其复选框:
var row = document.createElement("tr");
row.appointment = this;
addTd(row, this.app);
addTd(row, this.priority);
addTd(row, this.date);
addTd(row, this.additionalNotes);
var input = document.createElement("input");
var td = document.createElement("td");
td.appendChild(input);
row.appendChild(td);
input.setAttribute("type", "checkbox");
input.setAttribute("class","checkApp[]"); // Why checkApp[]? checkApp or check-app make more sense
input.setAttribute("value", this.completed);
input.addEventListener("change", function(event) {
var row = this.parentNode.parentNode,
appointment = row.appointment;
// change appointment however you like
});