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

JavaScript012

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 。所以没有注意这个问题。

在仔细阅读了你的问题后，帮你写了一个，不知道符合你的要求不。

我用html+js写的，关于后台的变量的接收由你自己完成。

html代码（复制到记事本后另存为以.html为后缀的文件，再到浏览器中打开看效果）：

<html><head>

<script language="javascript">

function countAll(o){

var sum=0

for(var i=1i<=3i++){

eval("if(o.c" + i + ".checked)sum+=o.j"+i+".value*o.s"+i+".value")

}

o.zong.value=sum

}</script>

</head><body>

<table cellspacing="0" cellpadding="0" border="1px" bordercolor="#0033FF" bordercolordark="#FFFF00" style="margin:1pxpadding:1pxtext-align:centerfont:12pxword-wrap:normalword-break:keep-alloverflow:visible" align="center">

<form action="" method="get">

<tr>

<td width="95" rowspan="2"><input name="c1" type="checkbox" id="c1" value="1">

物品1</td>

<td width="319">价格：

<input name="j1" type="text" id="j1" readonly value="20"></td>

</tr>

<tr>

<td>数量：

<input name="s1" type="text" id="s1"></td>

</tr>

<tr>

<td rowspan="2"><input name="c2" type="checkbox" id="c2" value="1">

物品2</td>

<td>价格：

<input name="j2" type="text" id="j2" readonly value="50"></td>

</tr>

<tr>

<td>数量：

<input name="s2" type="text" id="s2"></td>

</tr>

<tr>

<td rowspan="2"><input name="c3" type="checkbox" id="c3" value="1">

物品3</td>

<td>价格：

<input name="j3" type="text" id="j3" readonly value="10"></td>

</tr>

<tr>

<td>数量：

<input name="s3" type="text" id="s3"></td>

</tr>

<tr>

<td><input name="count" type="button" value="计算总价" onclick="countAll(this.form)"></td><td>总价：<input name="zong" type="text" id="zong"></td></tr><tr><td colspan="2"><input name="submit" type="submit" id="submit" value="提交"><input name="reset" type="reset" id="reset" value="重置"></td>

</tr></tr></form></table>

</body></html>

两个insert方法返回的就是被插入的对象,直接操作这两个对象就行了。

var tr = table.insertRow()var td = tr.insertCell()tr.setAttribute('align','center') '不用setAttribute而直接使用属性也可以.tr.setAttribute('bgcolor','#FF0000')

td.width=100  直接对属性赋值的作法。

要在tr元素的父元素中才能增加行，不能在tr本身去增加行。而tbody就是tr的父元素。如果是增加td，就要用tr，因为tr是td的父元素。

<script>// Last updated 2006-02-21 function addRowToTable() { var tbl = document.getElementById('tblSample')var lastRow = tbl.rows.length。

// if there's no header row in the table, then iteration = lastRow + 1

var iteration = lastRow。

var row = tbl.insertRow(lastRow)// left cell var cellLeft = row.insertCell(0)var textNode = document.createTextNode(iteration)cellLeft.appendChild(textNode)

// right cell var cellRight = row.insertCell。

var el = document.createElement('input')el.type = 'text'el.name = 'txtRow' + iterationel.id = 'txtRow' + iterationel.size = 40。

el.onkeypress = keyPressTestcellRight.appendChild(el)。