Javascript输入侦听器

我有一个按每行最后一列的值排序的产品表。我希望当我点击一个输入时，相应的复选框直接变为选中。这样，当我单击Save按钮时，数据库中将只管理所选产品的更新

原始代码中有太多与问题无关的内容，因此我将其简化为：

var c = 10;
var count = 1;
pageList.forEach(element => {
    document.getElementById("tabla_variantes").innerHTML+=`
        <tr style="background: white;">
            <th class="check_col" scope="row" style="padding: 0px; text-align: center; vertical-align: middle;">
                <input type="checkbox" value="${element.numero}" id="row${count}" name="row-check-pro">
            </th>
            <td> //image </td>
            <td> //product number </td>
            <td> //product name </td>
            <td> //product reference </td>
            <td> //product price </td>
            <td> //product stock </td>
            <td style="text-align:center; vertical-align: middle; padding: 8px 18px;">
                <input type="text" class="form-control text-end" id="posicion${element.numero}" value="${c}">
            </td>
        </tr>
    `;
    document.getElementById(`posicion${element.numero}`).addEventListener('input', (evt) => {
        console.log('run'); // Do something
        document.getElementById("row"+count).checked = true;
    });
    ++count;
    c += 10;
    if (c > list.length*10) c = 10;
});

var c=10；
var计数=1；
pageList.forEach（元素=>{
document.getElementById（“tabla_varianes”）.innerHTML+=`
//形象
//产品编号
//产品名称
//产品参考
//产品价格
//产品库存
`;
document.getElementById（`posicion${element.numero}`）.addEventListener（'input'，（evt）=>{
console.log（'run'）；//做点什么
document.getElementById（“行”+计数）.checked=true；
});
++计数；
c+=10；
如果（c>list.length*10）c=10；
});

---

正如您所看到的，我试图为每个输入添加一个侦听器，但控制台上没有显示任何内容。

主要问题是您正在使用

+=

和

innerHTML

。这从来不是个好主意。当您执行

x.innerHTML+=str

时，浏览器必须遍历

x

元素中的所有元素，构建一个HTML字符串，将该字符串返回到JavaScript代码，然后接受JavaScript代码中更新的字符串，删除

x

的所有以前的子元素，并将它们替换为通过解析新字符串创建的子元素。这些元素的所有状态都将丢失，包括它们上的任何事件处理程序

最小更改为：

在字符串变量中构建所有HTML

将其分配给

innerHTML

查找元素并向其添加事件处理程序

---

<>但是您应该考虑使用事件委托和DOM遍历，而不是在每个单独的元素上使用句柄。关于中的事件委派的更多信息，但简短的版本是您在公共祖先元素上处理事件，然后使用

event.target

确定事件的目标子体。

主要问题是您正在使用

+=

和

innerHTML

。这从来不是个好主意。当您执行

x.innerHTML+=str

时，浏览器必须遍历

x

元素中的所有元素，构建一个HTML字符串，将该字符串返回到JavaScript代码，然后接受JavaScript代码中更新的字符串，删除

x

的所有以前的子元素，并将它们替换为通过解析新字符串创建的子元素。这些元素的所有状态都将丢失，包括它们上的任何事件处理程序

最小的变化是：

在字符串变量中构建所有HTML

将其分配给

innerHTML

查找元素并向其添加事件处理程序

---

<>但是您应该考虑使用事件委托和DOM遍历，而不是在每个单独的元素上使用句柄。关于中的事件委派的更多信息，但简短的版本是，在公共祖先元素上处理事件，然后使用

event.target

确定事件的目标子体。

您确实应该委派

我还建议使用map而不是连接到DOM

这是一个替代品

const container=document.getElementById（“tabla_varianes”）；
常量页面列表=[{numero:1}，{numero:2}，{numero:3}]；
container.addEventListener（'input'，（evt）=>{
const tgt=evt.target；
if（tgt.name==“行检查专业”）{
如果（！tgt.checked）tgt.closest（“tr”）.querySelector（“.text end”）.value=”“；
}  
if（tgt.classList.contains（“文本结束”））{
tgt.closest（“tr”）.querySelector（“[name=row check pro]”）。checked=tgt.value.trim（）！=”；
}  
});
var c=10；
var计数=1；
container.innerHTML+=pageList.map（元素=>{
常量str=`
`;
++计数；
c+=10；
如果（c>pageList.length*10）c=10；
返回str；
}).加入（“”）
你真的应该授权

我还建议使用map而不是连接到DOM

这是一个替代品


const container=document.getElementById（“tabla_varianes”）；
常量页面列表=[{numero:1}，{numero:2}，{numero:3}]；
container.addEventListener（'input'，（evt）=>{
const tgt=evt.target；
if（tgt.name==“行检查专业”）{
如果（！tgt.checked）tgt.closest（“tr”）.querySelector（“.text end”）.value=”“；
}  
if（tgt.classList.contains（“文本结束”））{
tgt.closest（“tr”）.querySelector（“[name=row check pro]”）。checked=tgt.value.trim（）！=”；
}  
});
var c=10；
var计数=1；
container.innerHTML+=pageList.map（元素=>{
常量str=`
`;
++计数；
c+=10；
如果（c>pageList.length*10）c=10；
返回str；
}).加入（“”）

您不需要这样做，但您可能应该这样做。：-）@FaridShokri——在某些情况下是肯定的。这里OP似乎想完全替换目标元素的内容，因此构建一个字符串并将一个完整的字符串传递给浏览器，以便一次性解析和构建整个结构可能更有意义。@EmiliBellotPulido这是委托：
container.addEventListener（'input'，（evt）=>{const tgt=evt.target；tgt.closest（“tr”）.querySelector（“[name=row check pro]”。checked=true；}）；
-我从容器中委托单击，因此容器中的任何元素都可以检测到输入，并将按上述方式处理。您可以将