javascript对table的添加，删除行的操作

<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>

<style>.displayStyle{background-color:00FFFF;}    .hideStyle{background-color:#FFFFF;}.onClickStyle{background-color:00FF00;}a{color:red;}a:hover{color:green;    }
</style>

<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的添加，删除行的操作相关推荐

JS实现表格Table动态添加删除行
1.页面内容 <table style="border:1px ; width:100%; height:160px"> <THEAD> <TR> ...
***Redis hash是一个string类型的field和value的映射表.它的添加、删除操作都是O(1)(平均)。hash特别适合用于存储对象...
http://redis.readthedocs.org/en/latest/hash/hset.html HSET HSET key field value (存一个对象的时候key存) 将哈希 ...
php表格单元格怎么实现排序,javascript实现对表格元素进行排序操作
我们在上网中都能看到很多能够排序的,如大小.时间.价格等现在我们也试一下排序功能: 排序的函数代码:里面含有点击之后排序--还原,和排升序和降序. function sortAge(){ //对年龄 ...
Element-UI中关于table表格的那些骚操作
最近的项目中使用到element-ui组件库,由于做的是后台管理系统,所以经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是 ...
【JavaScript】在JavaScript中使用JSON进行序列化/反序列化操作
文章目录用于stringfy/parse操作的"JSON"对象 JavaScript中简单数据类型的JSON序列化操作使用toJSON()进行对象的序列化操作使用eval() ...
antd 下拉框怎么联动_Antd的Table组件嵌套Table以及选择框联动操作
一.需求在使用Table组件嵌套Table时,父子Table的选择框需要联动,即父Table选中,该行下的子Table需要全选中,某一个子Table全部选中,则该子Table所在的父Table那一行 ...
asp.net 对xml文件的读写,添加,修改,删除操作
asp.net 对xml文件的读写,添加,修改,删除操作下面有代码调试正确 using System; using System.Collections; using System.Componen ...
java中table是什么标签_[Java教程]javascript格式化table标签内容
[Java教程]javascript格式化table标签内容 0 2015-07-12 20:00:08 项目中遇到这样的需求,一大段文章正文的html代码在手机中显示不全,原因是由于其它有table ...
自定义添加删除行按钮
目录: 1. 问题描述 2. 实现思路 3. 示例 1. 问题描述编辑直接在数据列后放置增加行和删除行按钮,由于添加删除行包含了一些脚本,若数据量很大时,这些脚本就会导致模板运行慢.为此可以采取只是 ...

javascript对table的添加，删除行的操作

javascript对table的添加，删除行的操作相关推荐

最新文章

热门文章