将复选框链接到 Javascript 中的对象

link a checkbox to an object in Javascript

本文关键字：对象 Javascript 复选框 链接      更新时间：2023-09-26

假设我有一个表格，该表格通过在页面上填写表单并单击提交按钮来填充。

表格的最后一列是"已完成"部分，每行都有一个复选框。 单击复选框后，我想将该对象的 .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        
});
相关文章：