Building a dynamic jQuery Selector for an element whose ID contains braces


For doing some table formatting through jQuery on a table generated dynamically by Sharepoint 2010 in a Web Part, I tried to pick the ID of a table so that I could use it as a selector. I needed to conditionally highlight a cell in each row of a table based on the value of an adjacent cell in the same row.

The problem was, a typical ID value of a table dynamically generated by Sharepoint 2010 for a Web Part looks like this - {8CC7EF38-31D8-4786-8C20-7E6D56E49AE2}-{E60CE5E2-6E64-4350-A884-654B72DA5A53}

Going by the rules, the value of an ID attribute can be only be alpha-numeric & include the underscore and hyphen character.

To simulate the Sharepoint 2010 requirement, I wrote some sample code that has a table with 2 columns and enclosed the ID of a dummy table within braces -
{myTable} 

...and "escaped" the brace character -
\{myTable\}  

...using the following regular expression to get at the rows -
var regex = /[}{]+/g;
var rows = '#' + tableid.replace(re, "\\$&") + ' tbody tr'

That selector now gives me access to the table rows & by looping through the rows I was able to accomplish the conditional highlighting -
$(rows).each(function() { .. }

Comments