Question

我有几百个HTML输入并以表格格式选择页面上的所有字段，所有字段都有唯一的ID。 ID都遵循基本结构，我想听取3个特定的ID结构进行更改。 ID结构如下所述：

XX-ROWNUMBER-jobnumber可以

xx只是一个用于描述列的2位数字母组合，rownumber是该字段所在表格的行号，而jobnumber只是正在竞标的作业的工作号码（对于每个人都是相同的）单个表上的项目。）

我需要听取结构后面的所有ID：

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

如何实现这一目标？

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

额外信息 -

我在这里遇到的一般问题是我有一张桌子用来投标工作。每行用于出价的订单项，各列包含有关该订单项的信息。创建出价后，必须最终确定出价。完成后，需要记录任何更改，以通知某人需要由客户端进行更改。

Answer 1

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

Xenph Yan的帖子似乎与你想要完成的事情非常相关：jQuery selector regular expressions。具体来说，jQuery的正则表达式选择器插件： http://james.padolsey.com/javascript/regex-selector-for-jquery/

Answer 2

你可以delegate it to the parent：

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中不会出现气泡＆lt; 9.您可能可以使用onpropertychange，但我不确定。使用jQuery还允许更改事件在以前版本的IE中冒泡。

Answer 3

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

您可以通过各种方式在选择器中使用通配符。 Here is the jquery documentation on the subject

Answer 4

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

例如，

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

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

在这种特定情况下，您可以在input.attr-js，input.attr-wi或input.attr-qt上收听各种活动。我认为这种方法可以为您节省大量使用正则表达式的开销，并在输入字段中为您提供基于标记的搜索。

是否为类似ID结构的所有HTML对象创建更改侦听器？

4 个答案: