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

林祥纤

浏览: 3877950 次

最近访客更多访客>>

longquanhewei

淡夏的斌

Darrenda

jandroid

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

网页+js

table 表格网页制作 js html

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>