Question

I am not able to get value of a row because is giving Object Text (in FireFox and Chrome) where as it should be Object HTMLInputElement (which is in IE).
This is working smoothly in IE but not in Firefox.

HTML code:

<table id="mode">

<tr class="jnclisthdrrow">
    <td class ="jnclistcenter">&nbsp;</td>
    <td class ="jnclistcenter">Rank</td>
    <td class ="jnclistcenter">Mode</td>

 </tr>
 <tr>
    <td class ="jnclistcenter">&nbsp;</td>
    <td class ="jnclistcenter">&nbsp;</td>
    <td class ="jnclistcenter">&nbsp;</td>

</tr>
<tr >
<td class="jnclistcb">
    <input type=checkbox name="MODE_SL_Instance" value="0"></td>
<td align="center" class="tdata">   1</td>
<td class = "listdataright"><option value=''></option><option value='1246'>CWT</option>
</td>
</tr>
</table>

JAVA script code

 var table = document.getElementById("mode");
 var max = table.rows.length;
 console.log("no of rows are being selected="+max );
for ( var id = 0; id < max; id++ )
{   
    var row = table.rows[id];   
    var chkbox = row.cells[0].childNodes[0];
 if( null != chkbox && true == chkbox.checked ) 
    {
 console.log("inside the condition that anddeleted id ="+ id);
 table.deleteRow(id); 
    id--;
    }
}

Console log different browsers

for fireFox and Chrome

no of rows are being selected=3

the valur of chkbox.checked box is=undefined the value of the checkbox=[object Text]

the valur of chkbox.checked box is=undefined the value of the checkbox=[object Text]

the valur of chkbox.checked box is=undefined the value of the checkbox=[object Text]

for IE

no of rows are being selected=3

the valur of chkbox.checked box is=undefined the value of the checkbox=[object Text]

the valur of chkbox.checked box is=undefined the value of the checkbox=[object Text]

the valur of chkbox.checked box is=true the value of the checkbox=[object HTMLInputElement]

inside the condition that anddeleted id =2

Row Deleted!

My question is why Firefox is not able to recognize that row 2 as [object HTMLInputElement].
Where am I going wrong?
Please help!

Answer 1

Firefox and Chrome are following the W3C specification; I believe IE9 behaves the same.

Your code is relying upon IE<9 skipping text nodes consisting of whitespace. For the third row, Firefox, Chrome, and IE9 give two child nodes for the first cell: a text node containing \n (i.e., a newline followed by four spaces), and an input element. IE<9 skips the first text node because it consists purely of whitespace.

The easiest solution to this problem is to use children[0] instead of childNodes[0], as that gives the first Element child, as opposed to the first child.