js删除table的行或者列之后原来的表格混乱怎么办

JavaScript016

js删除table的行或者列之后原来的表格混乱怎么办,第1张

用js给表格动态插入了一行，行内有多个单元格。但插入行后，单元格错乱，很难看。这是因为原来表格行和单元格中有rowspan和colspan属性，这两个属性是为了合并单元格等情况设置的。rowspan 属性：指定单元格跨越的 行数。<td rowspan="5">单元格1</td>colspan 属性：指定单元格跨越的 列数，如：<td colspan="5">单元格2</td>当用js动态创建了单元格和行后，colspan 和 rowspan默认为1 ，所以要根据实际情况调整。我在js中 用 newTR.colspan = 2 指定了单元格占两列，但是还不行。有人说不要用 newTR.colspan = 2 这种形式，而要用 newTR.setAttribute("colspan", 2)我试验了，也不行。最后发现竟然是大小写问题：newTR.colSpan = 2 就可以了。（同理rowspan也应该是rowSpan）因为html 中colSpan一般是小写的 colspan 。所以没有注意这个问题。

<table name ="table1" width="285" border="1" cellspacing="0" cellpadding="0">

<tr>

<td width="109">数量</td>

<td width="41">单价</td>

<td width="91">金额</td>

</tr>

<tr>

<td name1="td11" onchange="sum()">10</td>

<td name1="td12"onchange="sum()">2</td>

<td name1="td13"onchange="sum()">20</td>

</tr>

<tr>

<td name1="td21"onchange="sum()">15</td>

<td name1="td22"onchange="sum()">3</td>

<td name1="td23"onchange="sum()">45</td>

</tr>

..

..

..

<tr>

<td name1="total1">合计数量：</td>

<td name1="total2" colspan="2">合计金额：</td>

</tr>

</table>

<script>

function sum()

{

var obj = document.getElementById("table1")

var length = obj.rows.length

var sum1 =0

var sum2 =0

for(int i=1i<length-1 i++)

{

sum1 =parseFloat(sum1) + parseFloat(document.getElementById ("td"+i+""+1).value)

sum2 =parseFloat(sum2) + parseFloat(document.getElementById ("td"+i+""+3).value)

}

document.getElementById ("total1").value = sum1

document.getElementById ("total2").value = sum2

}

</script>