How to update table cell value using jQuery

Question

I am having the problem of updating a table cell value using jQuery 1.4.2. it all works in Firefox and Safari, but IE8 and IE9 just don't do anything. There are no warnings, errors or anything that would give me some hint on where to look for it.

The table is as follows:

<table id="test"> <tr id="1"> <td id="name">sample name</td> <td id="schedule">sample value</td> <td id="day">sample value</td> </tr> <tr id="2"> <td id="name">sample name</td> <td id="schedule">sample value</td> <td id="day">sample value</td> </tr> <tr id="3"> <td id="name">sample name</td> <td id="schedule">sample value</td> <td id="day">sample value</td> </tr> </table> 

I make an ajax call and get json data:

 {"Test": [ {"id":"1", "name":"John", "day":"Monday"}, {"id":"2", "name":"Marry", "day":"Thursday"} ]} 

after receiving the data, there is a loop that iterates through the json dataset and updates the corresponding column with the received data as follows:

 $.each(json.Tests, function(){ /* update test with details */ var test = this.hash; /*set values for each test */ $("table#test tr[id=" + test + "]").find("#name").html(this.name); $("table#test tr[id=" + test + "]").find("#schedule").html(this.status); $("table#test tr[id=" + test + "]").find("#day").html(this.changed); }); 

As I mentioned, this has been tested in Safari and Firefox, everything works fine, but IE8 and IE9 don't seem to do anything.

Answer 1

I think the id attribute should be reserved for unique identifiers, in my opinion. How about changing the id attribute of the td elements for a class attribute or even a name attribute. I suspect IE is getting confused.

Also, if you keep the identifiers unique and change the id td attribute for the class, you can change your code to something like:

 $("#" + test + " td.name").html(this.name); 

And since a number can be almost anything, the prefix of these identifiers with some kind of identifier prefix would be good. Sort of:

 $("#thing-" + test + " td.name").html(this.name); 

And the html will look like this:

 <table id="test"> <tr id="thing-1"> <td class="name">sample name</td> <td class="schedule">sample value</td> <td class="day">sample value</td> </tr> <tr id="thing-2"> <td class="name">sample name</td> <td class="schedule">sample value</td> <td class="day">sample value</td> </tr> <tr id="thing-3"> <td class="name">sample name</td> <td class="schedule">sample value</td> <td class="day">sample value</td> </tr> </table> 

Hope this helps!

Answer 2

Identifiers should not begin with a number. Perhaps IE9 is not as forgiving as other browsers.

Answer 3

Do you have a url to test your Script?