views:

143

answers:

2

I'm sorry that I can't find a property title of my problem. I wrote a simple web page and some javascript to insert table row and delete it. Now my problem is when I delete the last inserted row, the second cell of the first table row's width became zero in IE6. Anyone can give me some advice? Great thanks.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function deleteRow(r)
{
    var i=r.parentNode.parentNode.rowIndex;
    document.getElementById('myTable').deleteRow(i);
}

function insertRowInTable(){
    var table = document.getElementById("myTable");
    var lastRow = table.rows.length;

    var newRow = table.insertRow(lastRow);
    var i=0;
    for(;i<9;i++){
        var td = newRow.insertCell(-1);
        td.innerHTML = ""+i;
    }
    newRow.insertCell(-1).innerHTML = "<input type='button' value='Delete"+newRow.rowIndex+"' onclick='deleteRow(this)'>";
}
</script>
</head>
<BODY><TABLE id=myTable width=450 border=1>
<TBODY>
<TR width="450">
<TD width=225 colSpan=7>Row 3</TD>
<TD width=225 colSpan=3><INPUT onclick=insertRowInTable(); type=button value=insert></TD></TR></TBODY></TABLE></BODY>

</html>
+1  A: 

This is really interesting. IE8 and Firefox work as per demand. But IE7 (I did not test it for IE6) does not work.

However, I have tested in different ways and observed that if you do not use colspan for the "TD width=225 colSpan=3"

i.e.

Either "TD width=225 colSpan=0" or "TD width=225" it works properly. I am not sure whether it is IE6/IE7's bug.

Hoque
+2  A: 

Just use the inline-style for the table "table-layout:fixed" in the following way

<TABLE id=myTable width=450 border=1 style="table-layout:fixed"><TBODY><TR width="450"> <TD width=225 colSpan=7>Row 3</TD> <TD width=225 colSpan=3><INPUT onclick=insertRowInTable(); type=button value=insert></TD></TR></TBODY></TABLE>

and it will work for you.

Thanks.

Hoque
I really appreciate what you did on my particular problem. Great thanks!
Yousui