[javascript] 表格间隔颜色显示，高亮，复选框全选，删除选中项

最新推荐文章于 2021-01-09 15:37:11 发布
最新推荐文章于 2021-01-09 15:37:11 发布
阅读量205 收藏
点赞数
分类专栏： ——java—— javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stillxjy/article/details/105861070
版权

效果演示：
在这里插入图片描述
HTML代码：
table.css

table{
	border:#249bdb 1px solid;
	width:500px;
	border-collapse:collapse;
}

table td{
	border:#249bdb 1px solid;
	padding:10px;
}

table th{
	border:#249bdb 1px solid;
	padding:10px;
	background-color:rgb(200,200,200);
}

mail.html

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <link rel="stylesheet" href="table.css">
  <title>Document</title>

  <style type="text/css">
  	.one{
		background-color:#9bf7d5;
	}
	.two{
		background-color:#f3e99a;
	}
	.over{
		background-color:red;
	}
  </style>

  <script type="text/javascript">
  	//行颜色间隔显示
	var prename;
	function trColor(){
		var oTabNode = document.getElementById("mailtable");
		var collTrNodes = oTabNode.rows;
		for(var x=0;x<collTrNodes.length-1;x++){
			if(x%2==1)
				collTrNodes[x].className = "one";
			else
				collTrNodes[x].className = "two";
			
			//高亮显示鼠标所在当前行
			collTrNodes[x].onmouseover = function(){
				prename = this.className;
				//alert(prename);
				this.className = "over";
			}

			collTrNodes[x].onmouseout = function(){
				this.className = prename;
			}

		}
	}
	
	//全选复选框
	function checkAll(node){
		var collMailNodes = document.getElementsByName("mail");
		for(var x=0;x<collMailNodes.length;x++){
			collMailNodes[x].checked = node.checked;
		}
	}
	
	//全选按钮
	function checkAllByBut(num){
		var collMailNodes = document.getElementsByName("mail");
		for(var x=0;x<collMailNodes.length;x++){
			if(num>1)
				collMailNodes[x].checked = !collMailNodes[x].checked;
			else
				collMailNodes[x].checked = num;
		}
		
	}

	//删除选中邮件
	function deleteMail(){
		var collMailNodes = document.getElementsByName("mail");
		for(var x=0;x<collMailNodes.length;x++){
			if(collMailNodes[x].checked){
				var oTrNode = collMailNodes[x].parentNode.parentNode;
				oTrNode.parentNode.removeChild(oTrNode);
				x--;
			}
		}
		//更新表格颜色
		trColor();
	}


	onload = function(){
		trColor();
	}
  </script>
 </head>
 <body>
 	<table id="mailtable">
		<tr>
			<th>
				<input type="checkbox" name="all" onclick="checkAll(this)"/>全选
			</th>
			<th>
				发件人
			</th>
			<th>
				邮件名称	
			</th>
			<th>
				邮件附属信息
			</th>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="mail" />
			</td>
			<td>
				依一
			</td>
			<td>
				我是邮件1
			</td>
			<td>
				邮件附属信息1
			</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="mail" />
			</td>
			<td>
				小二
			</td>
			<td>
				我是邮件2
			</td>
			<td>
				邮件附属信息2
			</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="mail" />
			</td>
			<td>
				张三
			</td>
			<td>
				我是邮件3
			</td>
			<td>
				邮件附属信息3
			</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="mail" />
			</td>
			<td>
				李四
			</td>
			<td>
				我是邮件4
			</td>
			<td>
				邮件附属信息4
			</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="mail" />
			</td>
			<td>
				王五
			</td>
			<td>
				我是邮件5
			</td>
			<td>
				邮件附属信息5
			</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="mail" />
			</td>
			<td>
				赵六
			</td>
			<td>
				我是邮件6
			</td>
			<td>
				邮件附属信息6
			</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="mail" />
			</td>
			<td>
				周七
			</td>
			<td>
				我是邮件7
			</td>
			<td>
				邮件附属信息7
			</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="mail" />
			</td>
			<td>
				孙八
			</td>
			<td>
				我是邮件8
			</td>
			<td>
				邮件附属信息8
			</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="all" onclick="checkAll(this)"/>全选
			</td>
			<td colspan="3">
				<input type="button" value="全选" onclick="checkAllByBut(1)"/>
				<input type="button" value="取消全选" onclick="checkAllByBut(0)"/>
				<input type="button" value="反选" onclick="checkAllByBut(2)"/>
				<input type="button" value="删除所选邮件" onclick="deleteMail()"/>
			</td>
		</tr>
	</table>
 </body>
</html>
STILLxjy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现带复选框的表格行选中删除时高亮显示
12-12
通过jquery技术来操作表格是件简单的事，通过jquery的语法，可以很轻松的完成表格的隔行换色，悬浮高亮，在实际的应用中可能会出现表格中带复选框的，删除时，将复选框所在的行的记录删除。在这的地方，可以加个特效...
JS - 表格隔行换色案例.
XiaoJian的博客
09-27 985
开发中，当使用表格陈列数据，数据过多时，通常使用隔行换色表示(方便查看)。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;表格隔行变色&lt;/title&gt; &lt;script type="text/javascript
html中用js实现的表格隔行换色
周先森爱编程丶的博客
09-16 7208
写的时候把自己的表//写的时候把自己的表的table加上id="tbl" <table id="tbl">代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格隔行换色</title> <script> window.onload = fun
JS中实现表格的隔行换色
鹿杖客的博客
01-16 4025
思路:1.首先需要自己设计一张表格 2.得到每一行的对象(数组) 3.通过遍历,奇数则color,偶数则color &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;全选全不选
Bootstrap之表格checkbox复选框全选
weixin_30905133的博客
06-12 861
效果图： HTML中无需添加额外的一列来表示复选框，而是由JS完成，所以正常的表格布局就行了： [html]view plaincopy <tableclass="tabletable-borderedtable-hover"> <thead> <trclass="succe...
利用Bootstrap实现表格复选框checkbox全选
08-31
Bootstrap相信应该不用多...这篇文章主要给大家介绍了如何利用Bootstrap实现表格中的checkbox复选框全选效果，文中给出详细的介绍及完整的实例代码，相信对大家的理解和学习具有一定的参考借鉴价值，下面来一起看看吧。
微信小程序获取复选框全选反选选中的值(实例代码)
01-19
wxml文件 全选 <view class=th>id 名称 <checkbox value
复选框全选与全不选操作实现思路
09-05
通过js简单实现下复选框全选与全不选，很常用的一个操作，具体实现思路及代码如下，有需求的朋友可以参考下，希望对大家有所帮助
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
10-19
主要给大家介绍了关于利用bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果的相关资料，文中给出了完整的示例代码供大家参考学习，对大家具有一定的参考学习价值，需要的朋友下面来一起看看吧。
HTML标签大全
STILLxjy
04-05 8337
HTML标签列表标签：有序列表和无序列表：表格标签：图片标签：超链接标签： 画中画标签： 框架标签： 表单标签： 其他标签： 超链接顶部位置 列表标签： <!--HTML注释：列表标签，可用于做目录等 列表标签：<dl> (define list) 上层项目：<dt> (define title) 下层项目：<dd> (define d...
<java EE 项目：Attendance> 从一个简单项目看java web 开发的整体布局
STILLxjy
06-26 2408
需求说明：效果图：1：数据库： 2：导入信息页面： 3：导入成功后的数据库： 4：显示考情信息（3条）： 项目整体格局： 注意：不用管最后一个servlet的包，这个是为了测试，将attenceAction.jsp用servlet来实现整体的布局，还是标准的三层结构：数据层Dao，业务层Biz，表示层Jsp源代码：实体： package com.attendance.entity;imp
<java EE 项目：petstore> 从一个简单项目看 java web 如何在本jsp页面上对用户输入的格式进行限制与验证
STILLxjy
06-28 1949
项目说明： 在我们写一些类似于登入注册页面，需要用户输入信息时，往往要对用户的输入信息的格式进行验证与限制。一般我们会将表单提交后在另一个Servlet或jsp页面上进行验证，但是一出错页面就会重新刷新，使得之前输入的信息丢失，这样用户体验就会很差。 现在的一些流行的网页，都是在输入未提交之前就会提醒用户，使用户能及时的进行修改。接下来，我们就通过一个小的练习，来看看 如何实现在本jsp页面上对
(MySql) InnoDB索引的本质和快速查询过程
STILLxjy
12-21 1386
本文涉及的范围包括： 1：到底什么是InnoDB引擎的索引，它的本质是什么，是如何实现的，实现的思路是什么？ 2：根据索引的实现思路，当我们要查询一条数据（行记录）时，查询语句的查询过程是什么？ 说到数据库引擎的索引，我们都知道它的作用是提高数据的查询速度，即在成千上万条记录中，如何快速的找到我们需要的数据？要搞清楚这个过程，首先我们需要搞懂，我们插入到数据库中的数据是如何存储和表示的。 InnoDB行格式：一条数据是如何存储的 InnoDB定义了4中行格式：COMPACT行格式，Redundant行格式，
(Mysql) MVCC多版本并发控制原理详解
STILLxjy
01-04 868
版本链 我们创建一个hero表： CREATE TABLE hero ( number INT, name VARCHAR(100), country varchar(100), PRIMARY KEY (number) ) Engine=InnoDB CHARSET=utf8; 然后向这个表里插入一条数据： INSERT INTO hero VALUES(1, ‘刘备’, ‘蜀’); 现在表里的数据就是这样的： 对于使用InnoDB存储引擎的表来说，它的聚簇索引记录中除了包含用户定义的列外，还包含两个必
<java EE 项目：Musicstore>项目结构分析： 项目的3层结构之间的关系 ：（表示层，业务层，数据层）
STILLxjy
06-21 845
广州实训的第一个项目： 项目整体布局： 表示层，业务层，数据层 3层之间的调用关系：
[java] 网页爬虫-爬取网页中的邮箱信息
STILLxjy
04-02 844
代码： import java.io.*; import java.util.regex.*; import java.net.*; class Spiders { public static void main(String[] args) throws Exception { getMai1s(); } public static void getMai1s() throws...
[正则表达式] 一文详解正则表达式（入门）-匹配-分割-替换-获取-
STILLxjy
04-01 707
正则表达式正则表达式的定义正则表达式对比实例QQ号校验规则总结字符类预定义字符类：数量词：按照操作字符串的功能来分类讲解正则表达式的使用规则。功能1:字符串匹配功能2:字符串切割功能3：替换字符串功能4：获取，将字符串中符合规则的子串获取出来。测试代码 正则表达式的定义 正则表达式：符合一定规则的字符串表达式。 |–作用：用于专门操作字符串。 |–特点：用一些特定的符号来表示一些代码操作，简化书...
(Redis) RDB与AOP持久化的实现与本质区别
STILLxjy
01-09 680
Redis服务器 Redis是一个键值对数据库服务器，服务器中通常包含着任意个非空数据库，而每个非空数据库中又可以包含任意个键值对，我们将服务器中的非空数据库以及它们的键值对统称为数据库状态。 例如，下图就是一个包含三个数据库以及数据控中的键值对的服务器的数据库状态。 Redis是内存数据库，它将自己的数据库状态存在内存中，所以如果不想办法将存储在内存中的数据库状态保存在磁盘中，那么一旦服务器进程退出，服务器中的数据库状态也会消失不见。 RDB持久化 Redis提供了RDB持久化功能，可以将Redis内
pyqt5表格头复选框全选
最新发布
11-14
在PyQt5中，要实现表格头复选框的全选功能，可以通过添加一个复选框到表格头，并且连接信号与槽函数来实现这一功能。首先，需要创建一个表格视图，并设置好表头和数据模型。然后，在表格头部添加一个复选框作为全选...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值