如何使用jQuery更新表格单元格值

Question

I am having problem updating table cell value using jQuery 1.4.2. it all works in Firefox and Safari but IE8 and IE9 is simply not doing anything. There is no warning, error or anything that would give me some hint where to look for it.

Table looks following:

<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 am executing ajax call and getting json data:

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

once data is received there is a loop which iterates through the json dataset and updates appropriate column with received data as following:

$.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 all works fine but IE8 and IE9 seems not 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 to a class attribute or even name attribute. I suspect that IE is getting confused.

Also, if you keep ids unique and change the id attribute of the td to a class then you can change your code to something like:

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

And because a number could represent pretty much anything also prefixing those ids with some sort of identifier prefix would be good. Something like:

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

And the html would 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 that helps!

Answer 2

Ids aren't supposed to start with a number. Perhaps IE9 isn't as forgiving as the other browsers.

Answer 3

你有一个我们测试你的脚本的URL吗？