为所有遵循类似ID结构的HTML对象创建更改侦听器的方法

Ways to make a change listener for all HTML objects following similar ID structure?

本文关键字：对象 HTML 创建 方法 侦听器 结构 ID      更新时间：2023-09-26

我在一个页面上有几百个HTML输入和选择字段，这些字段都有唯一的ID。ID都遵循一个基本结构，我想听听3个特定的ID结构的变化。ID结构描述如下：

xx行号作业号

xx只是一个2位字母的组合来描述列，行号是字段所在表的行号，而jobnumber只是正在投标的作业的作业编号（对于单个表上的每个项目都是相同的）。

我需要听所有遵循以下结构的ID：

js-rownumber-jobnumber
wi-rownumber-jobnumber
qt-rownumber-jobnumber

如何做到这一点？

不确定这是否有帮助，但在任何时候我都会知道屏幕上的最大行数，但这个数字是可变的（总的最大值为300）。

额外信息-

我在这里遇到的一般问题是，我有一张用来竞标工作的桌子。每一行用于投标的一个行项目，各个列包含该行项目的信息。一旦创建了投标书，就必须最终确定。一旦完成，任何更改都需要记录下来，以通知某人需要由客户端运行这些更改。

您可以使用jQuery来侦听更改事件，然后在更改事件发生后使用正则表达式来解析ID。

XenphYan的文章似乎与您想要实现的目标非常相关：jQuery选择器正则表达式。具体来说，jQuery的regex选择器插件：http://james.padolsey.com/javascript/regex-selector-for-jquery/.

您可以将其委托给父级：

var table = document.getElementById('parentTable');
table.addEventListener('change', function(ev) {
    var target = ev.target;
    // where the regex below matches the pattern
    if ( target.id.match(/(.*?)-('d+)-('d+)/) ) {
        console.log(target);
    }
});

请注意，change事件在IE<9.你可以用onpropertychange来做这些，但我不确定。使用jQuery还允许更改事件在早期版本的IE中冒泡。

使用jQuery，您可以尝试查找id以js $("[id^=js]")、wi $("[id^=wi]")和qt $("[id^=qt]")开头的元素。

可以通过各种方式在选择器中使用通配符。以下是关于主题的jquery文档

如果可以选择更改现有表的设计，那么我认为最好为每个元素（输入）分配多个类，而不是ID:

例如，

将类行-i分配给属于行i
的所有元素将类job-j分配给属于jobj
的所有元素将类attr-c分配给属于列c的所有元素

现在，您可以通过指定任何row, job & attr来查找任何输入元素。

在这种特定情况下，您可以侦听input.attr-js、input.attr-wi或input.attr-qt上的各种事件。我认为这种方法应该可以节省使用regex的大量开销，并在输入字段中提供基于标记的搜索。

相关文章：