table--表格的各种操作--增，删，移动，插入到指定位置
table--表格的各种操作--增，删，移动，插入到指定位置效果图：
http://dl.iteye.com/upload/attachment/0063/1562/08421b92-5dc7-3451-803a-906ee2268e57.png
源码如下： 方法有备注：
------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<table width="700px;" id="mytable" border="1px;" cellpadding="0px" cellspacing="0px">
<tr height="30px">
<th>账号</th>
<th>密码</th>
<th>操作</th>
</tr>
<tr height="30px">
<td>张三(原始数据)</td>
<td>123</td>
<td>
<a href="#" >添加(Before)</a>
<a href="#" >添加(After)</a>
<a href="#" >删除</a>
<a href="#" >上移</a>
<a href="#" >下移</a>
</td>
</tr>
<tr height="30px">
<td>李四(原始数据)</td>
<td>456</td>
<td>
<a href="#" >添加(Before)</a>
<a href="#" >添加(After)</a>
<a href="#" >删除</a>
<a href="#" >上移</a>
<a href="#" >下移</a>
</td>
</tr>
<tr height="30px">
<td>赵六(原始数据)</td>
<td>789</td>
<td>
<a href="#" >添加(Before)</a>
<a href="#" >添加(After)</a>
<a href="#" >删除</a>
<a href="#" >上移</a>
<a href="#" >下移</a>
</td>
</tr>
</table>
<br />
<input type="button" value="添加到表格中的第一行之前" />
<input type="button" value="添加到表格中的最后一行之后" />
<input type="button" value="添加到第二行" />
<script>
/**
在之前进行添加.
*/
var count = 1; //定义全局变量，进行区别,当前是第几个被插入。。。
function addBefore(obj){
var table = document.getElementById("mytable");//获取表格对象
/*
obj: <a>
obj.parentNode: <td>
obj.parnetNode.parentNode: <tr>
obj.parentNode.parentNode.rowIndex: 所在表格中的行数---表头算一行.
*/
var currentRow = obj.parentNode.parentNode.rowIndex;
//添加行
var new_tr = table.insertRow(currentRow);//新增加一行.
//设置tr的高度
new_tr.style.height ="30px";
//添加列
var td_name = new_tr.insertCell(0);
td_name.innerHTML = "王五(在之前进行插入)"+count;
count +=1;
var td_pwd = new_tr.insertCell(1);
td_pwd.innerHTML = "lisi";
var td_operation = new_tr.insertCell(2);
td_operation.innerHTML = ' <a href="#" >添加(Before)</a> '+
'<a href="#" >添加(After)</a>' +
'<a href="#" >删除</a>'+
'<a href="#" >上移</a>'+
'<a href="#" >下移</a>';
}
/**
在之后进行插入....
*/
function addAfter(obj){
var table = document.getElementById("mytable");//获取表格对象
/*
obj: <a>
obj.parentNode: <td>
obj.parnetNode.parentNode: <tr>
obj.parentNode.parentNode.rowIndex: 所在表格中的行数---表头算一行.
*/
var currentRow = obj.parentNode.parentNode.rowIndex;
//添加行
var new_tr = table.insertRow(currentRow+1);//新增加一行.
//设置tr的高度
new_tr.style.height ="30px";
//添加列
var td_name = new_tr.insertCell(0);
td_name.innerHTML = "王五(在之后进行插入)"+count;
count +=1;
var td_pwd = new_tr.insertCell(1);
td_pwd.innerHTML = "lisi";
var td_operation = new_tr.insertCell(2);
td_operation.innerHTML = ' <a href="#" >添加(Before)</a> '+
'<a href="#" >添加(After)</a>' +
'<a href="#" >删除</a>'+
'<a href="#" >上移</a>'+
'<a href="#" >下移</a>';
}
/**
删除当前行
*/
function deleteCurrentRow(obj){
var row_tr = obj.parentNode.parentNode.rowIndex;//获取当前行数
var table = document.getElementById("mytable");//获取表格对象
table.deleteRow(row_tr);
}
/**
上移一行
*/
function moveToUp(obj){
var row_tr = obj.parentNode.parentNode.rowIndex;//获取当前行数
if(row_tr<=1){
alert("已经是第一行了，无法进行移动!");
return;
}
changeRow(row_tr-1,row_tr);
}
/**
下移一行
*/
function moveToDown(obj){
var row_tr = obj.parentNode.parentNode.rowIndex;//获取当前行数
if(row_tr>=document.getElementById("mytable").rows.length-1){
alert("已经是最后一行了，无法进行移动!");
return;
}
changeRow(row_tr,row_tr+1);
}
/**
交换行
*/
function changeRow(row1,row2){
var table = document.getElementById("mytable");//获取表格对象
if(table.rows.swapNode){//FireFox不可用，IE可用
table.rows.swapNode(table.rows);
}else{
swapNode(table.rows,table.rows);
}
}
//交换2个DOM节点---火狐等中实现IE中的swapNode方法
function swapNode(node1,node2)
{
var parent = node1.parentNode;//父节点
var t1 = node1.nextSibling;//两节点的相对位置
var t2 = node2.nextSibling;
//如果是插入到最后就用appendChild
if(t1) parent.insertBefore(node2,t1);
else parent.appendChild(node2);
if(t2) parent.insertBefore(node1,t2);
else parent.appendChild(node1);
}
/**
添加到表格中的第一行
*/
function addToTableFirst(){
var table = document.getElementById("mytable");//获取表格对象
/*
obj: <a>
obj.parentNode: <td>
obj.parnetNode.parentNode: <tr>
obj.parentNode.parentNode.rowIndex: 所在表格中的行数---表头算一行.
*/
//添加行
var new_tr = table.insertRow(1);//新增加一行.---就在第一行
//设置tr的高度
new_tr.style.height ="30px";
//添加列
var td_name = new_tr.insertCell(0);
td_name.innerHTML = "王五(在第一行加入..)"+count;
count +=1;
var td_pwd = new_tr.insertCell(1);
td_pwd.innerHTML = "lisi";
var td_operation = new_tr.insertCell(2);
td_operation.innerHTML = ' <a href="#" >添加(Before)</a> '+
'<a href="#" >添加(After)</a>' +
'<a href="#" >删除</a>'+
'<a href="#" >上移</a>'+
'<a href="#" >下移</a>';
}
/**
添加到表格中的最后一行之后
*/
function addToTableLast(){
var table = document.getElementById("mytable");//获取表格对象
/*
obj: <a>
obj.parentNode: <td>
obj.parnetNode.parentNode: <tr>
obj.parentNode.parentNode.rowIndex: 所在表格中的行数---表头算一行.
*/
//添加行
var new_tr = table.insertRow(table.rows.length);//新增加一行.---就在第一行
//设置tr的高度
new_tr.style.height ="30px";
//添加列
var td_name = new_tr.insertCell(0);
td_name.innerHTML = "王五(在最后一行加入)"+count;
count +=1;
var td_pwd = new_tr.insertCell(1);
td_pwd.innerHTML = "lisi";
var td_operation = new_tr.insertCell(2);
td_operation.innerHTML = ' <a href="#" >添加(Before)</a> '+
'<a href="#" >添加(After)</a>' +
'<a href="#" >删除</a>'+
'<a href="#" >上移</a>'+
'<a href="#" >下移</a>';
}
/**
添加到表格中的第二行之后
*/
function addToTableTwo(){
var table = document.getElementById("mytable");//获取表格对象
/*
obj: <a>
obj.parentNode: <td>
obj.parnetNode.parentNode: <tr>
obj.parentNode.parentNode.rowIndex: 所在表格中的行数---表头算一行.
*/
//添加行
if(table.rows.length<2){
alert("表格行数少于2");
return;
}
var new_tr = table.insertRow(2);//新增加一行.---就在第一行
//设置tr的高度
new_tr.style.height ="30px";
//添加列
var td_name = new_tr.insertCell(0);
td_name.innerHTML = "王五(在最后一行加入)"+count;
count +=1;
var td_pwd = new_tr.insertCell(1);
td_pwd.innerHTML = "lisi";
var td_operation = new_tr.insertCell(2);
td_operation.innerHTML = ' <a href="#" >添加(Before)</a> '+
'<a href="#" >添加(After)</a>' +
'<a href="#" >删除</a>'+
'<a href="#" >上移</a>'+
'<a href="#" >下移</a>';
}
</script>
</body>
</html>
页:
[1]