javascript 操作表格

原文地址：http://hi.baidu.com/tejingdream/item/2efc212e3414afdc0f37f93d

一、表格的创建

document.createElement("table")，下面的代码主要是在某<div>区块中创建表格。
程序代码 <div id="tableTest">
</div>
<script language="JavaScript" type="text/javascript">
<!--
//获取容器div的引用
var container=document.getElementById("tableTest");
//创建表格对象
var _table=document.createElement("table");

//设置表格属性
_table.setAttribute("border","1");
_table.setAttribute("borderColor","black");
_table.setAttribute("width","200");

//创建5行
for(var i=0;i<5;i++){
var _tr=_table.insertRow(i);

//创建4列
for(var j=0;j<4;j++){
var _td=_tr.insertCell(j);
var _tn=document.createTextNode(i.toString()+j.toString());
_td.appendChild(_tn);
}
}
//将表格显示于页面
container.appendChild(_table);
//-->
</script> 

二、添加、删除行与列 ：利用deleteRow()和deleteCell()方法
程序代码 <script language="JavaScript" type="text/javascript">
<!--
//获得表格对象
var _table=document.getElementById("table1");

//定义函数，用于删除第一行
function deleteRow(){
_table.deleteRow(0);
}
//定义函数，用于删除第一列
function deleteColumn(){
//删除一列时需要对每一行分别进行列删除
for(var i=0;i<_table.rows.length;i++){
_table.rows[i].deleteCell(0);
}
}
//-->
</script> 

三、交换两行的位置
程序代码 <table id="table1" bordercolor="#000000" width="200" border="1">
<tbody>
<tr>
<td width="25%">1</td>
<td width="25%">11</td>
<!--使用javascript:void(0)是为了能够传递this参数到事件处理程序-->
<td width="25%"><a href="javascript:void(0)" οnclick="moveUp(this)">上移</a></td>
<td width="25%"><a href="javascript:void(0)" οnclick="moveDown(this)">下移</a></td>
</tr>
<tr>
<td>2</td>
<td>22</td>
<td><a href="javascript:void(0)" οnclick="moveUp(this)">上移</a></td>
<td><a href="javascript:void(0)" οnclick="moveDown(this)">下移</a></td>
</tr>
<tr>
<td>3</td>
<td>33</td>
<td><a href="javascript:void(0)" οnclick="moveUp(this)">上移</a></td>
<td><a href="javascript:void(0)" οnclick="moveDown(this)">下移</a></td>
</tr>
<tr>
<td>4</td>
<td>44</td>
<td><a href="javascript:void(0)" οnclick="moveUp(this)">上移</a></td>
<td><a href="javascript:void(0)" οnclick="moveDown(this)">下移</a></td>
</tr>
<tr>
<td>5</td>
<td>55</td>
<td><a href="javascript:void(0)" οnclick="moveUp(this)">上移</a></td>
<td><a href="javascript:void(0)" οnclick="moveDown(this)">下移</a></td>
</tr>
</tbody>
</table>
<script language="JavaScript" type="text/javascript">
<!--
function cleanWhitespace(element) {
//遍历element的子结点
for (var i = 0; i <element.childNodes.length; i++) {
var node = element.childNodes[i];
//判断是否是空白文本结点，如果是，则删除该结点
if (node.nodeType == 3 &&!/\S/.test(node.nodeValue))
node.parentNode.removeChild(node);
}
}
//获得表格对象
var _table=document.getElementById("table1");
cleanWhitespace(_table);
//使表格行上移，接收参数为链接对象
function moveUp(_a){
//通过链接对象获取表格行的引用
var _row=_a.parentNode.parentNode;
//如果不是第一行，则与上一行交换顺序
if(_row.previousSibling)swapNode(_row,_row.previousSibling);
}
//使表格行下移，接收参数为链接对象
function moveDown(_a){
//通过链接对象获取表格行的引用
var _row=_a.parentNode.parentNode;
//如果不是最后一行，则与下一行交换顺序
if(_row.nextSibling)swapNode(_row,_row.nextSibling);
}
//定义通用的函数交换两个结点的位置
function swapNode(node1,node2){
//获取父结点
var _parent=node1.parentNode;
//获取两个结点的相对位置
var _t1=node1.nextSibling;
var _t2=node2.nextSibling;
//将node2插入到原来node1的位置
if(_t1)_parent.insertBefore(node2,_t1);
else _parent.appendChild(node2);
//将node1插入到原来node2的位置
if(_t2)_parent.insertBefore(node1,_t2);
else _parent.appendChild(node1);
}
//-->
</script>