- 浏览: 1989227 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (509)
- JavaEE (122)
- Oracle数据库 (29)
- JavaScript (37)
- SAP (5)
- MySql数据库 (7)
- JavaSE (4)
- Ajax (1)
- jQuery (13)
- SSH框架 (36)
- Web Service (10)
- JSF框架 (2)
- JBPM (0)
- ireport报表 (2)
- ibatis (5)
- Hibernate (31)
- JSP (11)
- Tomcat 服务器 (20)
- Other (19)
- JavaWeb (4)
- Maven (11)
- OSWorkFlow (10)
- HTML (13)
- Exception汇总 (7)
- SVN (2)
- 笑话 (1)
- JSTL (1)
- WebSphere Message Broker (13)
- ANT命令 (3)
- Liunx (12)
- Struts2 (26)
- Eclipse (6)
- DOS (3)
- Flex (11)
- WebSphere (1)
- 开发常用工具 (3)
- Junit (2)
- EJB (4)
- Struts1.2 (2)
- Jboss (1)
- Android (2)
- Java框架源码解析 (1)
- Spring (4)
- MyBatis (6)
- SpringMVC (4)
- Jetty (2)
- 数据库表设计 (1)
- SSO (4)
最新评论
-
贝塔ZQ:
也可以试试PageOffice插件,觉得更简单点
Jxl操作Excel设置背景、字体颜色、对齐方式、列的宽度 -
jia1208:
...
Could not publish server configuration for Tomcat v6.0 Server at localhost. -
u011274527:
赞
java.io.EOFException java.io.ObjectInputStream$PeekInputStream.readFully 错误 -
旭旭小牛啦:
怎么没哟了,继续赛
jQuery 选择器 -
wzw3919:
100行会报空指针
Java 解压缩zip文件
<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>
HTML代码:
发表评论
-
100个javascript小知识点-经典
2014-02-08 14:22 11721. document.write(”"); 输出 ... -
javascript读取文件夹下的所有文件
2012-09-19 00:56 8212一、功能实现核心:FileSystemObject 对象 ... -
Javascript去除数组中的重复值
2012-08-27 23:33 1500去除数组中的重复值; 具体代码如下 <script ... -
Javascript常用的操作
2012-07-12 00:50 1082我们经常使用javascript脚本对table、select ... -
HTML字符实体(Character Entities)和转义字符串(Escape Sequence)
2012-04-13 07:56 1114HTML字符实体(Character En ... -
javascript获取点击的文本属性
2012-04-11 15:45 1657我们通常需要获取点击的文本信息,于是通过javascr ... -
javascript校验实例三
2012-02-07 09:26 1109/** * 获取id获取name,className选择器 ... -
javascript校验实例二
2012-01-29 09:38 1084/** * 解析字符数组; * @param s ... -
javascript闭包的实现方式
2012-01-15 00:58 1138闭包说白了就是封装的意思..为了隐藏方法内部的实现细节. ... -
javascript校验实例一
2011-12-30 17:44 1141//公共类型; validTypeArray = ne ... -
javascript 文本验证实例。
2011-12-28 16:41 1043javascript 基本验证 /** * ... -
javascript面向对象知识学习笔记二
2011-12-28 10:43 974javascript 面向对象知识学习笔记二: ... -
javascript 面向对象学习笔记一
2011-12-28 10:41 981javascript 面向对象基础知识: //给o ... -
HTML中的Flie标签禁止修改路径问题。
2011-10-18 17:37 1338之前在项目中遇到一个问题.就是HTML中 File文件控 ... -
iframe中子窗体调用父窗体的方法
2011-10-09 15:52 1993比如一个框架使用使用iframe。 左侧的iframe中 ... -
JS 敲回车按钮 登陆 支持火狐 和 iE浏览器.
2011-09-16 15:50 3132登陆的 敲回车按钮, 在使用event事件来监听. ... -
javascript 页面跳转
2011-08-24 17:06 991比如我们在.jsp页面定义一个iframe.点击按钮链接的时候 ... -
javascript 操作两个select,左右选择值。
2011-08-21 18:45 3143下面是我做的一个简单的例子. 就是当 ... -
javascript 基础知识
2011-08-21 14:19 1184获取表单 Js代码 document. ... -
javascript GetElementById的属性和对元素属性的设置
2011-08-18 21:55 15302顾明思义,get-Element-By-Id,就是通过ID来 ...
相关推荐
在JavaScript中,表格(Table)是网页数据展示的常用元素,而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先,我们需要了解HTML中的`<table>`元素及其相关...
HTML TABLE批量添加行与删除行.javascript实现。
这个案例主要涉及了如何使用JavaScript来实现表格的添加、删除等基本操作。这些功能对于网页交互性和用户体验有着重要的作用,尤其适合初学者进行学习和实践。 首先,`students.html`文件很可能是用来展示表格结构...
在`jstable添加行删除行复制行.html`这个示例文件中,可以看到这些概念是如何具体实现的。通过阅读和理解代码,你可以更深入地学习如何利用JavaScript实现表格的动态管理。同时,也可以结合CSS和jQuery等库来增强...
在本话题中,我们将深入探讨如何使用JavaScript来添加和删除HTML表格(table)中的行。这对于构建数据展示或者管理界面非常实用。 首先,让我们了解HTML表格的基本结构。一个简单的HTML表格由`<table>`标签定义,每...
javascript添加删除table行
这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具",我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中,`<table>`元素用于创建...
这篇文章主要介绍了如何使用jQuery在指定的HTML表格(table)中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作,包括在表格中动态修改内容。 首先,我们要理解HTML表格的基本结构,一个...
在本文中,我们将深入探讨如何使用JavaScript来动态地操作表格,包括添加、删除行、列以及单元格。这将帮助开发者在不刷新页面的情况下,实现灵活的数据管理功能。 1. **创建表格** 在HTML中,我们可以使用`<table...
使用javascript脚本向页面中的table添加和删除行
4. **事件绑定**:对于删除行功能,通常我们会将删除操作绑定到行的右键菜单或行的特定图标上,这需要使用`addEventListener`为每个行添加事件监听器。 这样,我们就实现了基本的`HTML`表格动态添加和删除行的功能...
对表格的行和列进行插入/删除,并对每行添加行号
本文实例讲述了javascript清空table表格的方法。分享给大家供大家参考。具体如下: 1. 通常方法 循环table的rows,然后一个一个删除。 这个方法是通常的方法,可行,但是效率不好。 2. 另一个方法 var artTable = ...
这篇教程将专注于如何使用JavaScript动态地添加、删除Table的行,并实现排序功能,包括删除整行和整列。以下是对这些概念的详细解释: 1. **动态添加Table行:** 要动态添加行,我们可以使用`document....
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括动态地添加和删除表格行。本文将深入探讨如何使用jQuery实现这一功能,以提高网页交互性。 一、HTML基础 首先,我们需要一个基本...
以上就是使用 jQuery 对表格进行添加、删除行与列的基本操作。在实际应用中,可能需要结合具体的业务需求进行调整,如添加动画效果、验证数据等。通过熟练掌握这些基本技巧,可以大大提高网页交互的灵活性和用户体验...
使用javascript实现table动态增加删除行列。
本文将深入探讨如何使用JavaScript来动态地增加和删除表格(Table)的行。 首先,我们需要了解HTML表格的基本结构。一个基本的表格由`<table>`元素、`<tr>`(表格行)元素、`<td>`(表格数据单元格)元素组成。如果...
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括对表格(table)的操作。本文将深入探讨如何使用jQuery实现表格的添加、删除行和列的功能,以便于动态更新和管理HTML表格内容。 ...