时间戳

首页 > 解决方案 > Javascript 输入监听器

javascript - Javascript 输入监听器

问题描述

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

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

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;
});

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

标签： javascriptinputaddeventlistener

解决方案

你真的应该委派

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

这是替换的下降

const container = document.getElementById("tabla_variantes");
const pageList = [{numero:1},{numero:2},{numero:3}];

container.addEventListener('input', (evt) => {
  const tgt = evt.target; 
  if (tgt.name==="row-check-pro") {
    if (!tgt.checked) tgt.closest("tr").querySelector(".text-end").value="";
  }  
  if (tgt.classList.contains("text-end")) {
    tgt.closest("tr").querySelector("[name=row-check-pro]").checked = tgt.value.trim() != ""; 
  }  
});


var c = 10;
var count = 1;
container.innerHTML+= pageList.map(element => {
  const str = `<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 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>
    `;
    ++count;
    c += 10;
    if (c > pageList.length*10) c = 10;
    return str;
}).join("");
<table id="tabla_variantes">
</table>

推荐阅读