Question

对不起，我找不到问题的正确标题。我写了一个简单的网页和一些Javascript来插入表格行并删除它。现在我的问题是当我删除最后一个插入的行时，第一个表行的宽度的第二个单元格在IE6中变为零。有人可以给我一些建议吗？

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

Answer 1

以下列方式使用“table-layout：fixed”表的内联样式

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

它会对你有用。

感谢。

Answer 2

这真的很有趣。 IE8和Firefox按需工作。但是IE7（我没有为IE6测试它）不起作用。

但是，我已经以不同的方式进行了测试，并观察到如果你不使用colspan进行“TD width = 225 colSpan = 3”

即

“TD width = 225 colSpan = 0”或 “TD宽度= 225”它工作正常。我不确定它是否是IE6 / IE7的错误。

删除最后一个插入表行时，第一个表行的第二个单元格的宽度变为0

2 个答案: