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>
以下是使用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>
javascript对table的添加，删除行的操作的更多相关文章
- ASP.NET给Table动态添加删除行，并且得到控件的值
ASP.NET给Table动态添加控件并且得到控件的值 由于跟老师做一个小的项目,可是我自己又不太懂js,所以一直为动态建立表格并且能动态的取值和赋值感到苦恼.起初在网上找到了一些js资源,解决了动态 ...
- table 排序 添加 删除 等操作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- jQuery动态对表格Table进行添加或删除行以及修改列值操作
jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...
- 超级简单的jquery操作表格(添加/删除行、添加/删除列)
利用jquery给指定的table添加一行.删除一行 <script language="javascript" src="./jquery.js"> ...
- 关于在SharePoint 2013（2010）中Javascript如何实现批量批准的自定义操作功能？
1.概述: SharePoint 2013(包括SharePoint 2010)提供了很方便的,多选的界面,但是很多操作还是不能批量进行,比如:批准的功能.如果您要解决方案不关心代码,那么请直接联系作 ...
- Javascript Jquery 中的数组定义与操作_子木玲_新浪博客
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
- ***Redis hash是一个string类型的field和value的映射表.它的添加、删除操作都是O(1)(平均)。hash特别适合用于存储对象
http://redis.readthedocs.org/en/latest/hash/hset.html HSET HSET key field value (存一个对象的时候key存) 将哈希 ...
- [分享·JavaScript]提取Table中的内容到XML对象
在公司工作的时候,经常需要在前端进行这样的数据提取的操作.而之前的针对每个页面中的Table都重新写原生的JS代码效率太低,且不方便aspx对XML进行处理. 所以,在今天抽时间写了这么一个JS类,见 ...
- 高级复制实验配置添加复制节点操作时报错：ORA-23308: object GP.T does not exist or is invalid
出错原因: 使用高级复制时,在源端启动复制支持,执行语句:REPADMIN@bys1>execute dbms_repcat.generate_replication_support('gp', ...
随机推荐
- Can't connect to X11 window server using 'localhost:10.0' as the value of the DISPLAY variable.
刚刚在一台Linux服务器上安装了jdk和Tomcat,然后部署了一个web项目,在项目中有个添加图片的功能,保存图片时报错 org.springframework.web.util.NestedSe ...
- 工具 | Axure基础操作 No.4
昨天因为有事没有学习,很愧疚,今天赶紧补上.俗话说,"学如逆水行舟,不进则退"还是很有道理的. 1.设置页面内容格式 这里主要是在浏览器中的内容所出现的对齐格式,左对齐或者是居中对 ...
- WPF几个样式
其实也是大家学的最多的,网上的. 1.老版360 2.360悬浮窗 不好意思,没有找到悬浮球的图片,随便一个代替了 3.老版迅雷 4.新版360 遗憾的是这个样式没有完整的源代码.只是一个演示和图片代 ...
- Vue和element-ui结合的简单使用
前提 vue在前端技术中使用越来越多,也成为了主流框架,花点时间稍微了解下vue-cli.vue-router结合element-ui的使用.本人使用的是windows系统,后续介绍以windows7 ...
- Linux中将端口(80)重定向
在Linux中直接指定命令: iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT --to-port 8080 其中80为要访问的端 ...
- react-router-dom和本地服务本地开发 (node、webpack)
场景 使用react 做开发,避免会使用react-router React Router 已经是V4的版本 React Router 目前已经被划分成了三个包:react-router,react- ...
- SQL注入的浅尝辄止
简单的说,SQL注入就是通过在前端页面输入SQL语句,导致系统暴露异常信息在前端页面显示,非法者通过这些异常信息获取数据库的相干信息,为攻击系统做准备.
- PHP 中根据 IP 获取地址
这里使用的是淘宝 IP 地址库提供的 API 接口. 淘宝 IP 地址库:http://ip.taobao.com/instructions.html API 文档说明: 使用事例: /** * 调 ...
- 大数据&人工智能&云计算
仅从技术上讲大数据.人工智能都包含工程.算法两方面内容: 一.大数据: 工程: 1)云计算,核心是怎么管理大量的计算机.存储.网络. 2)核心是如何管理数据:代表是分布式存储,HDFS 3)核心是如何 ...
- 第三篇 : vi编辑器配置与基本操作
目录 一.vi编辑器的配置 二.一般模式下的常用操作 一.vi编辑器的配置 配置文件位置 #配置文件virc(vi);vimrc(vim) cd /etc/vim //配置文件有在这目录的,也有可能是 ...