0

I copy a script of Kevin S (member of this site) like this

<table class="personid">
<tr>
    <td class='personid'>i</td>
    <td>Harry</td>
</tr>
<tr>
    <td class='personid'>i</td>
    <td>Simon</td>
</tr>
    <td class='personid'>i</td>
    <td>Maria</td>
</tr>
</tr>
    <td class='personid'>i</td>
    <td>Victory</td>
</tr>
</table>    
<script>
        var list = document.getElementsByClassName("personid");
    for (var i = 1; i <= list.length; i++) {
        list[i].innerHTML = i;
    }
    </script>

I don't know why This script can run smoothly in Chrome and Firefox but it can't not run in IE 7. How can i make it can decode in IE 7. (See in IE7 it's only present i instead of 1 2 3 4 5)

One more question: When i remove the class="personid" on tag Table

   The result is i - 1 - 2 - 3 -

When i add class = "personid" on tag table

The result is 1 - 2 - 3 - 4 -

Why it comes like this ? Because i think the script is only change the variable "i" on which td have the personid class name.

Thanks for your help, i also enclose my previous post and i make a new question because it's passed over. Sorry for the inconvenience!

http://stackoverflow.com/questions/11026258/html-and-javascript-auto-increment-number
Ryan
  • 141
  • 2
  • 2
  • 9

2 Answers2

2

In order for the loop to work as you expect without having the class 'personid' on the table element as well, the for loop needs to start at zero, not one.

for (var i = 0; i <= list.length; i++)

The reason it is working with i=1 only when table has class="personid" is because table then becomes the 0th (first) element in the collection returned by getElementsByClassName, making your loop start on the second (element 1), which in this case is the first td.

See wnwall's post for the rest of your answer.

  • If loop start from zero in this case then value of variable `i` (in this case `0` (zero)) replace content of `TABLE` because table element also returned by `getElementsByClassName` – Andrew D. Jun 15 '12 at 05:21
  • Yes but I was under the impression from the way the question was worded that the OP added that in order to fix the bug and wanted to know why it didn't work without it. Re-read the OP's question carefully and see if you stand behind that downvote. –  Jun 15 '12 at 05:25
  • Yes. Please update your answer to make it more full. Add explanation into answer: why Ryan must change loop to start from zero. – Andrew D. Jun 15 '12 at 05:33
  • Edited for posterity and because you're right in principle. I would like to point out that the upvote you canceled was the OP's though. (i.e., he already understood :P) –  Jun 15 '12 at 14:18
1

IE7 doesn't support getElementsByClassName, so you need to provide that function.

See: http://robertnyman.com/2008/05/27/the-ultimate-getelementsbyclassname-anno-2008/

Nathan Wall
  • 6,426
  • 2
  • 22
  • 23
  • Beat me to the other half of it. –  Jun 15 '12 at 05:11
  • Sorry, i download the js file and include it to my HTML file. But it doesn't work. Could you please explain more information about how to use it.Thanks – Ryan Jun 15 '12 at 06:25