<body>

            <form name="myForm">

                <table width="100%" id="tab" name="tab" border="0px" style="text-align:center;">

                    <tr style="background-color:0099FF;color:black;">

                        <td>选择</td>

                        <td>编号</td>

                        <td>姓名</td>

                        <td>年龄</td>

                        <td>地址</td>

                        <td>操作</td>

                        <td>操作</td>

                    </tr>

                    <tr id="tr1" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">

                        <td><input type='hidden'><input type="checkbox" value="11"/></td>

                        <td>100</td>

                        <td>张三</td>

                        <td>15</td>

                        <td>湖南株洲</td>

                        <td><a href="#" onclick="addRow()">添加</a></td>

                        <td><a href="#" onclick="deleteRow(this)">删除</a></td>

                    </tr>

                    <tr id="tr2" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">

                        <td><input type="checkbox" value="22"/></td>

                        <td>101</td>

                        <td>李四</td>

                        <td>15</td>

                        <td>湖南长沙</td>

                        <td><a href="#" onclick="addRow()">添加</a></td>

                        <td><a href="#" onclick="deleteRow(this)">删除</a></td>

                    </tr>

                    <tr id="tr3" onmouseOver="onmouseOverMethod(this)" onmouseOut="onmouseOutMethod(this)" onclick="onClickChangeStyle(this)">

                        <td><input type="checkbox" value="33"/></td>

                        <td>102</td>

                        <td>王五</td>

                        <td>15</td>

                        <td>湖南湘潭</td>

                        <td><a href="#" onclick="addRow()">添加</a></td>

                        <td><a href="#" onclick="deleteRow(this)">删除</a></td>

                    </tr>

                </table>

            </form>

    </body>

以下是使用javascript对表格的添加行,删除行,进行操作..

具体代码如下:

style样式代码:

<style>

      .displayStyle{

             background-color:00FFFF;

         }    

         .hideStyle{

             background-color:#FFFFF;

         }

         .onClickStyle{

             background-color:00FF00;

         }

         a{

             color:red;

         }

         a:hover{

             color:green;

         }

</style>

javascript代码:

<script>

var selectRow=null;

//单击时,改变样式;

function onClickChangeStyle(obj){

       //获取表格对象;

       var tab = document.getElementById("tab");

         //获取当前行选择下标;

         var currentRowIndex = obj.rowIndex;

         //获取表格所有行数;

       var tablRows = tab.rows.length;

       //获取表格第一行,第一列的值;

       //var firstCellValue = tab.rows[0].cells[0].innerHTML;

       //获取表格的第一行，第一列的第一个元素的值;

       //var firstChildValue = tab.rows[0].cells[0].firstChild.value;

       //循环表格的所有行;并且选择的当前行，改变背景颜色；

       for(var i = 1;i<tablRows;i=i+1){

               if(currentRowIndex == i){

                     //为选中的当前，设置css样式;

                     selectRow  = tab.rows[i];

                     tab.rows[i].className= "onClickStyle";

               }else{

                     //把没有选中的行的背景样式设置为白色;

                       tab.rows[i].className= "hideStyle";

               }

       }

}

//鼠标移入时，改变颜色;

function onmouseOverMethod(selectThis){

      selectThis.className="displayStyle";

      if(selectRow==selectThis){

              selectThis.className="onClickStyle";

      }

}

//鼠标移除时，改变背景颜色;

function onmouseOutMethod(selectThis){

     selectThis.className="hideStyle";

     if(selectRow == selectThis){

          selectThis.className="onClickStyle";

    }

}

//添加行;

function addRow(){

        var tab = document.getElementById('tab');

      var rowIndex = tab.rows.length+1;

      //添加一行;

        var tr  = tab.insertRow();

        tr.onmouseover = tr.className="displayStyle" ;

        tr.onmouseout = tr.className="hideStyle" ;

        tr.onclick=function (){this.className="onClickChangeStyle(this)";}

        var td1 = tr.insertCell();

        var td2 = tr.insertCell();

        var td3 = tr.insertCell();

        var td4 = tr.insertCell();

        var td5 = tr.insertCell();

        var td6 = tr.insertCell();

        var td7 = tr.insertCell();

        td1.innerHTML = "<input type='hidden'/><input type='checkbox' value = '1'>";

        td2.innerHTML = ""+rowIndex;

        td3.innerHTML = "测试";

        td4.innerHTML = "22";

        td5.innerHTML = "无地址";

        td6.innerHTML = "<a href='#' onclick='addRow()'>添加</a>";

        td7.innerHTML = "<a href='#' onclick='deleteRow(this)'>删除</a>";

        //初始化行;

        initRows(tab);

}

//初始化行,设置序列号;

function initRows(tab){

     var tabRows = tab.rows.length;

     for(var i = 0;i<tabRows.length;i++){

             tab.rows[i].cells[0].firstChild.value=i;

    }

}

//删除行;(obj代表连接对象)

function deleteRow(obj){

    var tab = document.getElementById('tab');

    //获取tr对象;

    var tr = obj.parentNode.parentNode;

    if(tab.rows.length>2){

        //tr.parentNode，指的是，table对象;移除子节点;

        tr.parentNode.removeChild(tr);

    }

    //重新生成行号;

    initRows(document.getElementById('tab'));

}

</script>    &nbsp;&nbsp;

javascript对table的添加，删除行的操作的更多相关文章

  1. ASP.NET给Table动态添加删除行，并且得到控件的值

    ASP.NET给Table动态添加控件并且得到控件的值 由于跟老师做一个小的项目,可是我自己又不太懂js,所以一直为动态建立表格并且能动态的取值和赋值感到苦恼.起初在网上找到了一些js资源,解决了动态 ...

  2. table 排序 添加 删除 等操作

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  4. 超级简单的jquery操作表格(添加/删除行、添加/删除列)

    利用jquery给指定的table添加一行.删除一行 <script language="javascript" src="./jquery.js"> ...

  5. 关于在SharePoint 2013（2010）中Javascript如何实现批量批准的自定义操作功能？

    1.概述: SharePoint 2013(包括SharePoint 2010)提供了很方便的,多选的界面,但是很多操作还是不能批量进行,比如:批准的功能.如果您要解决方案不关心代码,那么请直接联系作 ...

  6. Javascript Jquery 中的数组定义与操作_子木玲_新浪博客

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  7. ***Redis hash是一个string类型的field和value的映射表.它的添加、删除操作都是O(1)(平均)。hash特别适合用于存储对象

    http://redis.readthedocs.org/en/latest/hash/hset.html HSET HSET key field value   (存一个对象的时候key存) 将哈希 ...

  8. [分享·JavaScript]提取Table中的内容到XML对象

    在公司工作的时候,经常需要在前端进行这样的数据提取的操作.而之前的针对每个页面中的Table都重新写原生的JS代码效率太低,且不方便aspx对XML进行处理. 所以,在今天抽时间写了这么一个JS类,见 ...

  9. 高级复制实验配置添加复制节点操作时报错：ORA-23308: object GP.T does not exist or is invalid

    出错原因: 使用高级复制时,在源端启动复制支持,执行语句:REPADMIN@bys1>execute dbms_repcat.generate_replication_support('gp', ...

随机推荐

  1. python函数调用时传参方式

    位置参数 位置参数需与形参一一对应 def test(a,b) #a,b就是位置参数 print(a) print(b) test(1,2)   关键字参数 与形参顺序无关 def test(x,y) ...

  2. mysql alter 增加修改表结构及约束

    1) 加索引,添加时若未指定索引名,默认为字段名   mysql> alter table 表名 add index 索引名 (字段名1[,字段名2 …]); 例子: mysql> alt ...

  3. python装饰器内获取函数有用信息方法

    装饰器内获取函数有用信息方法 .__doc__用于得到函数注释信息 .__name_用于得到函数名 在函数引用装饰器的时候,函数名会变为装饰器内部执行该函数的名字,所有在直接执行函数名加.__doc_ ...

  4. CentOS7 LNMP+phpmyadmin环境搭建（二、LNMP环境搭建）

    上一篇博客我们在虚拟机上安装了centos7,接下来,就开始安装lnmp环境吧. 还是跟之前一样,进入命令行后,先使用su命令切换到root权限. 首先配置防火墙  CentOS 7.0默认使用的是f ...

  5. 用 wait-notify 解决生产者-消费者问题

    //生产者 package com.mzj.test; import java.util.Vector; import java.util.logging.Level; import java.uti ...

  6. pyhton 下 使用getch(), 输入字符无需回车

    原代码来自 https://code.activestate.com/recipes/134892-getch-like-unbuffered-character-reading-from-stdin ...

  7. Java8 Comparator 排序方法

    Java8 中 Comparator 接口提供了一些静态方法,可以方便于我们进行排序操作,下面通过例子讲解下如何使用 对整数列表排序(升序) List<Integer> list = Ar ...

  8. 在CentOS7中搭建Zookeeper集群

    前几天装了CentOS7.并安装了一些基本的工具,现在我手上有三台机器:分别是master,slave1,slave2. 今天我将搭建zookeeper,使用的版本是zookeeper-3.4.11. ...

  9. 为什么我要放弃javaScript数据结构与算法（第六章）—— 集合

    前面已经学习了数组(列表).栈.队列和链表等顺序数据结构.这一章,我们要学习集合,这是一种不允许值重复的顺序数据结构. 本章可以学习到,如何添加和移除值,如何搜索值是否存在,也可以学习如何进行并集.交 ...

  10. Milking Order

    Milking Order 题意:给出m个描述状态,其中包含若干个边的关系,问最多能取x (x<=m)个状态,使得形成的图没有环.就是说取x个状态,用状态中的关系建边,其中不能有环. 题解:最大 ...