Javascript 如何为HTML网格单元启用JS onchange事件

我不想使用JQuery，只想使用HTML和JS

我有一个HTML网格，我想检测组成网格特定列的单元格中DOM“onchange”TextArea的变化

我不知道如何注册要调用的“onchange”函数-有人能帮忙吗

更多信息----

目前-我有一个小型嵌入式微型计算机，提供网页配置。我使用Jquery和一个小的JQ网格编辑器

我想摆脱JQ，因为代码大小比我的应用程序页面大20倍。当我摆脱了JQ——我也摆脱了小网格编辑器

我不使用HTML表单

我根据配置数据动态创建网格。典型的网格可能是6列15行

我想验证特定列中单元格“onchange”中的用户条目，以便我的JS代码根据该更改更新/修改网格中的其他单元格

下面是网格的HTML页面条目

       <div class="UnivTable">
    <fieldset>
    <legend>Universes</legend>
      <table id="tblUniverses" >
        <tr>
          <th>Order<br />Placement</th>
          <th style="width:10px"></th>
          <th>Universe<br />Number</th>
          <th>Channels<br />per Universe</th>
          <th style="width:10px"></th>
          <th style="display:none;"></th>
          <th>Controller<br />Start Channel</th>
          <th>Controller<br />End Channel</th>
        </tr>

      </table>

    </fieldset>
    </div>

宇宙
下单

宇宙数
每个宇宙的通道

控制器
启动通道
控制器
端通道

这是我当前添加行的JQ

         $("#tblUniverses tbody").append(
     "<tr>"+
     "<td>"+DA[0]+"</td>"+
     "<td class='gap'></td>"+       
     "<td contenteditable='true'>"+DA[1]+"</td>"+
     "<td contenteditable='true'>"+DA[2]+"</td>"+
     "<td class='gap'></td>"+
     "<td style='display:none;'>"+DA[3]+"</td>"+
     "<td class='NF'>"+DA[4]+"</td>"+
     "<td class='NF'>"+DA[5]+"</td>"+       
     "</tr>");

$（“#tblUniverses tbody”）.append(
""+
“+DA[0]”+
""+       
“+DA[1]”+
“”+DA[2]+“”+
""+
“”+DA[3]+“”+
“+DA[4]”+
“+DA[5]+”+
"");

这将更改为JS代码

该行中有两（2）个单元格，我想触发事件

我可以在语句中添加侦听器吗

我是否循环通过该表的DOM以及这些单元格的所有事件侦听器？如果是，如何循环？

HTML示例

<textarea id='textarea'></textarea>
<div id="log"></div>

您可以通过更改id来挂起侦听器 并编写您自己的函数，其中任何内容都可以。

---

通过e，您可以跟踪页面上可以更改的内容

请显示代码：）I网格是静态HTML还是动态生成，表单JS？您在选择正确的DOM元素时遇到问题吗？或者附加事件侦听器？如果要在调用时进行注册，为什么不在onchange函数中使用console.log（'Hello'）？当您询问与项目相关的问题时，请始终共享您的代码，以便我们能够轻松地专门帮助解决该问题。我看不到如何将您的答案应用于我的问题。你的回答是基于我不完整的问题——自从你发帖后，我进一步解释了我的问题。

        document.addEventListener("DOMContentLoaded", () => {
            const textarea = document.getElementById('textarea');
            const log = document.getElementById('log');

       textarea.addEventListener('change' , updateValue)
       function updateValue(e) {
           console.log(e);
           log.textContent = e.target.value;
}
});