IE10: getElementsByName() is not returning the elements that has same Id in IE10

Question

I have table in the jsp which is dynamically populated. I used same id for all the table rows.

In the javascript I want to retreive all the table row elements whose id is "resultRow". and getElementsByName("resultRow") in js gives empty htmlcollection in IE10

Is there any other way to get the tablerows of matched id

Any help is greatly appreciated

`here is my code snippet

In JSP:
<table id="subSecondTable" cellpadding="0" cellspacing="0">
   <c:set var="loopCount" value="0" />
   <c:forEach var="vinList" items="${requestScope.vehicleDetailsPO}">
     <tr id="resultRow" height="10" class="handCursor"
       onclick="rowColorChange('<c:out value="${loopCount}"/>','<c:out value="${vinList.vin}"/>');">

In js:
function rowColorChange(rowNumber,vin){ 
    var rows=document.getElementsByName("resultRow");   
    var columns;
    rowHighlighted=rowNumber;       
    for(i=0;i<rows.length;i++){
        if (i==rowNumber){      
            rows[rowNumber].style.backgroundColor="blue";
            //change the text color for the highlighted row 
            columns = rows[rowNumber].cells
            for(j=0;j<columns.length;j++){
                columns[j].style.color = "white";
            }
            //change the text color for the highlighted row
            var previousRowint = parseInt(previousRow);                 
            if (previousRow != rowNumber)
            {               
                columns = rows[previousRowint].cells
                for(j=0;j<columns.length;j++){
                    columns[j].style.color = "black";
                }
            }               
            previousRow=rowNumber; 
            if(vin==''){             
                vin = rows[parseInt(rowHighlighted)].cells[3].innerText;
            }
            document.getElementById("txtCopyVin").value=vin;
            document.getElementById("txtCopyVin").select();
        }else{      
            rows[i].style.backgroundColor="white";                       
        }
    }
    if(window.event!=null){
        rows[rowNumber].cells(window.event.srcElement.cellIndex).focus();
    }
}`

variable rows is empty collection in IE10 resultant Html is same as that of in Ie9 — Harish, May 01 '13 at 17:20

score 1 · Answer 1 · answered Jul 16 '13 at 21:12

I've just confirmed with my own testing that this is a change that Microsoft seems to have made in IE10 to make it compatible with every other browser on the market. In every other browser, ID and name are different things. But until IE 10, Microsoft chose to do things differently, which caused lots of incompatibilities, as described here. This change fixed my code written for chrome, but seems to have broken code written for IE.

If you instruct your users to turn on "compatibility mode", it should work as before, but that's probably not a good long term solution.

The good news is if you go through and fix this issue in your code by making id's refer to id's and names refer to names, your site will then be compatible with other browsers besides IE.

Looking at your code, it seems you want to replace id="resultRow" with name="resultRow"

score 0 · Answer 2 · edited May 01 '13 at 17:26

0

This behavior is by design.
name and id are two different things.

In addition, ids must be unique; your HTML is invalid.

You should use class instead, and call getElementsByClassName().

edited May 01 '13 at 17:26

BoltClock

700,868
160
1,392
1,356

answered May 01 '13 at 17:02

SLaks

868,454
176
1,908
1,964

score 0 · Answer 3 · answered May 01 '13 at 17:04

0

Since when were name and id equal? To give an example, how many people have the name John Smith (besides the Doctor)? In spite of that, they all have unique IDs. The same applies to your HTML.

Use <tr name="resultRow"...>, then you can access getElementsByName('resultRow')

answered May 01 '13 at 17:04

Niet the Dark Absol

320,036
81
464
592

name is not a valid attribute for the tablerow element. I used it it did not work – Harish May 01 '13 at 17:33
I was under the impression that `name` is a standard attribute that can be applied to all elements. Can you demonstrate it not working? – Niet the Dark Absol May 01 '13 at 17:42

IE10: getElementsByName() is not returning the elements that has same Id in IE10

3 Answers3