When the last insert table row is deleted, the width of second cell of first table row became 0
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.
加载中,请稍侯......
精彩评论