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

Question

I have several hundred HTML input and select fields on a page in table format, all with unique ID's. The ID's all follow a basic structure, and there are 3 particular ID structures I'd like to listen to for change. ID structure is described below:

xx-rownumber-jobnumber

The xx is simply a 2 digit letter combination to describe the column, rownumber is the row number of the table the field exists on, and jobnumber is just the job number of the job being bid on (will be the same for every item on a single table).

I need to listen to all ID's that follow the structure:

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

How can this be achieved?

Not sure if this helps, but at any one time I will know the maximum number of rows on the screen, but this number is variable (overall max of 300).

Extra information -

The general problem I have here is I have a table being used to bid jobs. Each row is for a line item for the bid, and the various columns hold information about that line item. Once a bid has been created, it has to be finalized. Once it is finalized, any changes need to be recorded to notify someone that the changes need to be run by the client.

Answer 1

You can use jQuery to listen for the change event, and then use regular expressions to parse the IDs once a change event has occurred.

Xenph Yan's post seems very relevant to what you're trying to accomplish: jQuery selector regular expressions . Specifically, the regex selector plugin for jQuery: http://james.padolsey.com/javascript/regex-selector-for-jquery/ .

Answer 2

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

Please note that the change event does not bubble in IE < 9. You may be able to use onpropertychange for those, but I don't know for certain. Using jQuery would also allow the change event to bubble in previous versions of IE.

Answer 3

Using jQuery you can try to find elements whose id begin with js $("[id^=js]") , wi $("[id^=wi]") and qt $("[id^=qt]") .

You can use wildcards in selectors in various ways. Here is the jquery documentation on the subject

Answer 4

If changing the design of the existing table is an option, then I think you should be better off with assigning multiple classes to each element (input) rather than IDs:

For instance,

Assign class row - i to all elements belonging to row i
Assign class job - j to all elements belonging to job j
Assign class attr - c to all elements belonging to column c

Now you can find any input element by specifying any of row, job & attr .

In this specific case, you can listen various events on input.attr-js , input.attr-wi or input.attr-qt . I think this approach should save you a lot of overhead of working with regex and provide you a tag based search in your input fields.