Hide function doesn't work to IE..

[ampera]

why this script not work to internet explorer...


<script type="text/javascript">

function hide_checkbox(){
findTr = function(el) {
while (el.parentNode) {
el = el.parentNode;
if (el.tagName.toLowerCase() == 'tr')
return el;
}
}

form = document.getElementById("form");
var check = form.elements;
for(var i = check.length - 1; i > -1 ; --i){
if(check[i].type == 'checkbox' && check[i].checked){
var checkedCheckbox = findTr(check[i])
if(checkedCheckbox){
checkedCheckbox.style.display = 'none';
}
}
}
}
</script>


<form id="form" action="" >
<table width="400" border="1">
<tr>
<td width="364"> 1. Hide......</td>
<td width="20"><input type="checkbox" name="name" value="value1"></td>
</tr>
<tr>
<td width="364"> 2. Hide......</td>
<td width="20"><input type="checkbox" name="name" value="value2"></td>
</tr>
<tr>
<td width="364"> 3. Hide......</td>
<td width="20"><input type="checkbox" name="name" value="value3"></td>
</tr>
<tr>
<td width="364"> 4. Hide......</td>
<td width="20"><input type="checkbox" name="name" value="value4"></td>
</tr>
<tr>
<td width="364"> 5. Hide......</td>
<td width="20"><input type="checkbox" name="name" value="value5"></td>
</tr>
</table>
<br/>

<input type="button" value="Delete" onclick="hide_checkbox();">

</form>


please help for the solution...

[jscheuer1]

Adding the highlighted will fix it:


var form = document.getElementById("form");

In IE, due to the implied document.all collection, you cannot set an undeclared variable that would then be in the global scope if it has the same name as an object that already exists in said collection in the global scope.

In other words, in IE:


form

already refers to the form with the id of "form". You cannot then set it (it's already an object, and a protected one at that in IE) to anything.

If you formally declare it as a variable using the var keyword, you can now set it to anything that you would like.

[ampera]

Thank's for solution.....