When the last insert table row is deleted, the width of second cell of first table row became 0_问答_开发者

When the last insert table row is deleted, the width of second cell of first table row became 0

开发者 https://www.devze.com 2022-12-17 19:53 出处：网络

I\'m sorry that I can\'t find a proper 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

I'm sorry that I can't find a proper 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?

<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>

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.

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.