日期:2014-05-16  浏览次数:20424 次

js 动态生成表格
javascript控制table

var table = document.getElementById("tableId")

增加一行:table.insertRow()?? //默认添加到最后一行,添加到指定行用insertRow(index)方法

删除一行:table.deleteRow() //默认删除最后一行,删除指定行用deleteRow(index)方法

增加一列:table.insertCell()?? //默认添加到最后一列,添加到指定列用insertCell(index)方法

删除一列:table.deleteCell()?? //默认删除最后一列,删除指定列用deleteCell(index)方法

统计列数:table.rows.item(0).cells.length

统计行数:table.rows.length

设置单元格colspan:cell.colSpan=2 //注意区分大小写, 如果写colspan会报错

获得单元格宽:table.rows[0].cells[0].offsetWidth

获得单元格高:table.rows[0].cells[0].offsetHeight

设置单元格高度:talbe.rows[0].cells[0].width = xxx

?

说明:

附录

insertRow() 方法用于在表格中的指定位置插入一个新行。

语法

tableObject.insertRow(index)

返回值

返回一个 TableRow,表示新插入的行。

说明

该方法创建一个新的 TableRow 对象,表示一个新的 <tr> 标记,并把它插入表中的指定位置。

新行将被插入 index 所在行之前。若 index 等于表中的行数,则新行将被附加到表的末尾。

如果表是空的,则新行将被插入到一个新的 <tbody> 段,该段自身会被插入表中。

抛出

若参数 index 小于 0 或大于等于表中的行数,该方法将抛出代码为 INDEX_SIZE_ERR DOMException 异常。

?

转载于http://blog.csdn.net/cctt_1/archive/2008/01/21/2057233.aspx

?

javascript动态生成Table是在迫不得以的情况下使用。因为表格会耗费大量的时间进行重绘。?而且如果窗口变化了,还会引起意想不到的格式变化。所以最好不要使用。

先在<form>中添加一个<div id='divTable'></div>下面就可以使用javascript代码来做这个事情:


...{
????
var?div?=?document.getElementById(divName);
????var?row?=?table.insertRow();//创建一行
????cell.width?=?"10";//更改cell的各种属性
}

?

你还可以发挥下想象力动态地创建各种各样的控件。上面的function是放置JS文件中的。

如果在html中的调用<script type="..." src="*.js"></script>

这里是创建了一个Table的元