table-报表的各种操作-增，删，移动，插入到指定位置

2012-08-22

table--表格的各种操作--增，删，移动，插入到指定位置table--表格的各种操作--增，删，移动，插入到指定位置效

table--表格的各种操作--增，删，移动，插入到指定位置

table--表格的各种操作--增，删，移动，插入到指定位置

效果图：

源码如下：方法有备注：

------------------------------------------------------

<!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="#" onclick="addBefore(this)">添加(Before)</a>
??????? <a href="#"? onclick="addAfter(this)">添加(After)</a>
??????? <a href="#"? onclick="deleteCurrentRow(this)">删除</a>
??????? <a href="#"? onclick="moveToUp(this)">上移</a>
??????? <a href="#"? onclick="moveToDown(this)">下移</a>
??????? </td>???????
??? </tr>
?? <tr height="30px">
???? <td>李四(原始数据)</td>
??????? <td>456</td>
??????? <td>
??????? <a href="#" onclick="addBefore(this)">添加(Before)</a>
??????? <a href="#"? onclick="addAfter(this)">添加(After)</a>
???????? <a href="#"? onclick="deleteCurrentRow(this)">删除</a>
???????? <a href="#"? onclick="moveToUp(this)">上移</a>
??????? <a href="#"? onclick="moveToDown(this)">下移</a>
??? </td>
??? </tr>
???
???? <tr height="30px">
???? <td>赵六(原始数据)</td>
??????? <td>789</td>
??????? <td>
??????? <a href="#" onclick="addBefore(this)">添加(Before)</a>
??????? <a href="#"? onclick="addAfter(this)">添加(After)</a>
???????? <a href="#"? onclick="deleteCurrentRow(this)">删除</a>
???????? <a href="#"? onclick="moveToUp(this)">上移</a>
??????? <a href="#"? onclick="moveToDown(this)">下移</a>
??? </td>
??? </tr>
</table>

?/**
??在之前进行添加.
?*/
?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="#" onclick="addBefore(this)">添加(Before)</a> '+
?????? ??????? '<a href="#"? onclick="addAfter(this)">添加(After)</a>' +
????????'<a href="#"? onclick="deleteCurrentRow(this)">删除</a>'+
?????? ??????? '<a href="#"? onclick="moveToUp(this)">上移</a>'+
??????? ??????'<a href="#"? onclick="moveToDown(this)">下移</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="#" onclick="addBefore(this)">添加(Before)</a> '+
?????? ??????? '<a href="#"? onclick="addAfter(this)">添加(After)</a>' +
????????'<a href="#"? onclick="deleteCurrentRow(this)">删除</a>'+
?????? ??????? '<a href="#"? onclick="moveToUp(this)">上移</a>'+
??????? ??????'<a href="#"? onclick="moveToDown(this)">下移</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[row1].swapNode){//FireFox不可用，IE可用
????table.rows[row1].swapNode(table.rows[row2]);
???}else{
????swapNode(table.rows[row1],table.rows[row2]);
???}
?}
?
?? //交换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="#" onclick="addBefore(this)">添加(Before)</a> '+
?????? ??????? '<a href="#"? onclick="addAfter(this)">添加(After)</a>' +
????????'<a href="#"? onclick="deleteCurrentRow(this)">删除</a>'+
?????? ??????? '<a href="#"? onclick="moveToUp(this)">上移</a>'+
??????? ??????'<a href="#"? onclick="moveToDown(this)">下移</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="#" onclick="addBefore(this)">添加(Before)</a> '+
?????? ??????? '<a href="#"? onclick="addAfter(this)">添加(After)</a>' +
????????'<a href="#"? onclick="deleteCurrentRow(this)">删除</a>'+
?????? ??????? '<a href="#"? onclick="moveToUp(this)">上移</a>'+
??????? ??????'<a href="#"? onclick="moveToDown(this)">下移</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="#" onclick="addBefore(this)">添加(Before)</a> '+
?????? ??????? '<a href="#"? onclick="addAfter(this)">添加(After)</a>' +
????????'<a href="#"? onclick="deleteCurrentRow(this)">删除</a>'+
?????? ??????? '<a href="#"? onclick="moveToUp(this)">上移</a>'+
??????? ??????'<a href="#"? onclick="moveToDown(this)">下移</a>';
?}
?
</script>

</body>
</html>

热点排行

Web前端

table-报表的各种操作-增，删，移动，插入到指定位置