文档章节

JS表格删除行,增加行,选中高亮

a
 apm300
发布于 2016/12/05 18:04
字数 336
阅读 15
收藏 0
<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
  <script type="text/javascript"> 
  
      window.onload = function(){
                  
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
		var rows = document.getElementsByTagName("tr");
		for(var i=0;i<rows.length;i++) {
			rows[i].setAttribute("onmouseover","changeColor(this);");
			rows[i].setAttribute("onmouseout","initColor(this);");
			rows[i].style.backgroundColor = "#ccc";
		}
     
	 
	 }
	 
	 //改变当前行颜色
	 function changeColor(r) {
		r.style.backgroundColor = "#66ddff";
	 }
	 function initColor(r) {
		r.style.backgroundColor = "#ccc";
	 }
     
      // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
     function addRow() {
         var trnode = document.createElement("tr");
         var tdnode1 = document.createElement("td");
         tdnode1.innerHTML = "000x";
         trnode.appendChild(tdnode1);
         var tdnode2 = document.createElement("td");
         tdnode2.innerHTML = "张三";
         trnode.appendChild(tdnode2);
         var tdnode3 = document.createElement("td");
         var a = document.createElement("a");
         a.setAttribute("href","#");
         a.setAttribute("onclick","deleteRow(this)");
         a.innerHTML="删除";
         tdnode3.appendChild(a)
         trnode.appendChild(tdnode3);
         document.getElementById("table").appendChild(trnode);
		 trnode.setAttribute("onmouseover","changeColor(this);");
		 trnode.setAttribute("onmouseout","initColor(this);");
		 initColor(trnode);
     }
    		
   	 
     // 创建删除函数
     function deleteRow(r) {
        var i = r.parentNode.parentNode.rowIndex;
        document.getElementById("table").deleteRow(i);
     }


  </script> 
 </head> 
 <body> 
	   <table border="1" width="50%" id="table">
	   <tr>
		<th>学号</th>
		<th>姓名</th>
		<th>操作</th>
	   </tr>  

	   <tr>
		<td>xh001</td>
		<td>王小明</td>
		<td><a href="#" onclick="deleteRow(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
	   </tr>

	   <tr>
		<td>xh002</td>
		<td>刘小芳</td>
		<td><a href="#" onclick="deleteRow(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
	   </tr>  

	   </table>
	   <input type="button" value="添加一行" onclick="addRow()" />   <!--在添加按钮上添加点击事件  -->
 </body>
</html>

 

© 著作权归作者所有

共有 人打赏支持
上一篇: SQL查询
a
粉丝 0
博文 5
码字总数 2427
作品 0
福州
私信 提问
iview table表格的自定义样式

iview table表格的自定义样式 1.需求 背景颜色为深色背景 左侧可勾选checkbox 选中鼠标hover浮动到某行,当前行背景颜色更换为红色 斑马条纹 效果图 2.设计 iview的官方文档已经给出了解决方...

玩大神的OSChina
10/17
0
0
FineUI(开源版)v4.2.0 发布了!

源代码已经托管到OSC:http://git.oschina.net/sanshi/FineUI FineUI(开源版)是基于 ExtJS 的专业 ASP.NET 控件库,8年开源路,第123个版本,值得信赖! 在线示例:http://fineui.com/dem...

三生石上
2015/05/19
4.7K
19
抢先预览 ExtJS 4.2 的表格控件

在新发布的Ext JS 4.2测试版中,我们做了许多的改动。你可以在论坛公告处查看所有详细信息。在这篇文章中,我们将着重介绍性能提升的Grid组件。在之前关于Ext Js 4.1性能和基于此版本的应用的...

oschina
2013/01/23
2.8K
1
jquery 表格的增加删除和修改及设置奇偶行颜色

最近一周在学了一点点HTML, CSS, javascript,用javascript的jquery完成了一个简单的表格操作,有增加、删除和修改功能。 表格分三列,第一列是学生编号(ID号),第二列是学生姓名,第三列为...

长平狐
2012/12/10
193
0
jquery 表格的增加删除和修改及设置奇偶行颜色

最近一周在学了一点点HTML, CSS, javascript,用javascript的jquery完成了一个简单的表格操作,有增加、删除和修改功能。 表格分三列,第一列是学生编号(ID号),第二列是学生姓名,第三列为...

彭博
2012/04/12
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

《资治通鉴》读书笔记及阅读感悟2200字

《资治通鉴》读书笔记及阅读感悟2200字: 1.用夏桀,商纣暴虐昏君和商汤,周武王仁德明君做比较,因为人民归心,上天赐名要不然就永远要恪守臣节至死不渝。 又用商朝的微子取代纣王,商朝可以...

原创小博客
11分钟前
0
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
49分钟前
2
0
Docker搭建代码质量检测平台-SonarQube(中文版)

Sonar是一个用于代码质量管理的开源平台,用于管理源代码的质量,可以从七个维度检测代码质量。通过插件形式,可以支持包括java,C#,C/C++,PL/SQL,Cobol,JavaScrip,Groovy等等二十几种编程语言...

Jacktanger
56分钟前
2
0
Windows / Linux / MacOS 设置代理上网的方法汇总

本文汇总了 Windows / Linux / MacOS 设置代理上网的各种方法,总结如下: 1、设置系统代理(Windows、Linux、MacOS) 2、设置代理插件(Chrome、Chromium、Firefox、Opera、QQ等浏览器) 3、...

sunboy2050
昨天
4
0
自定义 Maven 的 repositories

有时,应用中需要一些比较新的依赖,而这些依赖并没有正式发布,还是处于milestone或者是snapshot阶段,并不能从中央仓库或者镜像站上下载到。此时,就需要 自定义Maven的<repositories>。 ...

waylau
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部