类似于邮件管理，具有全选，反选功能的代码

最新推荐文章于 2018-10-14 14:15:34 发布
最新推荐文章于 2018-10-14 14:15:34 发布
阅读量335 收藏
点赞数
分类专栏： html+css DOM javascript 文章标签： javascript java xhtml ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hatalhcz/article/details/83984332
版权
javascript 同时被 3 个专栏收录
18 篇文章 0 订阅
订阅专栏
html+css
16 篇文章 0 订阅
订阅专栏
DOM
15 篇文章 0 订阅
订阅专栏 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">

table{
	border:#0000FF 1px solid;
	width:70%;
	}
table td,table th{
	border:#0099FF 1px solid;
	}
table th{
	background-color:#009900;
	}
	
.one{
	background-color:#FFFF99;
	}
.two{
	background-color:#33FFFF;
	}
.over{
	background-color:#006699;
	}
</style>



<script type="text/javascript">

//行颜色间隔显示并高亮。

var name;
function trColor()
{
	var tabNode = document.getElementsByTagName("table")[0];
	
	var trs = tabNode.rows;
	
	for(var x=1 ; x<trs.length-1; x++)
	{
		if(x%2==1)
			trs[x].className = "one";
		else
			trs[x].className = "two";
		
		trs[x].onmouseover = function()
		{
			name = this.className;
			this.className = "over";
		};
		
		trs[x].onmouseout  = function()
		{
			this.className = name;
		}
	}
}


window.onload = function()
{
	trColor();
}


// 完成checkbox的全选动作。
function checkAll(index)
{
	var allNode = document.getElementsByName("all")[index];
	
	var mails = document.getElementsByName("mail");
	
	for(var x=0; x<mails.length; x++)
	{
		mails[x].checked = allNode.checked;
	}
}

//完成按钮的选取。
function checkByBut(num)
{
	var mails = document.getElementsByName("mail");
	
	for(var x=0; x<mails.length; x++)
	{
		if(num>1)
			mails[x].checked = !mails[x].checked;
		else
			mails[x].checked = num;
	}
}

//删除所选邮件。
function delMail()
{

	if(!window.confirm("你真的要删除所选邮件吗?"))
		return ;
	var mails = document.getElementsByName("mail");
	

	var arr = new Array();
	var pos =0;
	for(var x=0; x<mails.length; x++)
	{
		if(mails[x].checked)
		{
			var trNode = mails[x].parentNode.parentNode;
			arr[pos++] = trNode;
		}
	}
	
	for(var x=0; x<arr.length; x++)
	{
		var trNode = arr[x];
		trNode.parentNode.removeChild(trNode);
	}
	
	trColor();
}
</script>


</head>

<body>

<table>
	<tr>
    	<th><input type="checkbox" name="all" οnclick="checkAll(0)" />全选</th>
        <th>发件人</th>
        <th>邮件名称</th>
    </tr>
    <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三00</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三11</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三22</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三33</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三mm</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三44</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三55</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三66</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三77</td>
        <td>新的邮件</td>
    </tr> <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三88</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三99</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三aa</td>
        <td>新的邮件</td>
    </tr>
     <tr>
    	<td><input type="checkbox" name="mail" /></td>
        <td>张三zz</td>
        <td>新的邮件</td>
    </tr>
    
    <tr>
    	<th><input type="checkbox" name="all" οnclick="checkAll(1)" />全选</th>
        <th colspan="2">
        	<input type="button" value="全选" οnclick="checkByBut(1)" />
            <input type="button" value="取消全选" οnclick="checkByBut(0)" />
            <input type="button" value="反选" οnclick="checkByBut(2)" />
            <input type="button" value="删除所选邮件" οnclick="delMail()" />
       	</th>
        
    </tr>
</table>

</body>
</html>

 

hatalhcz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Dom编程（邮件的全选、反选、删除选中项）
程序员
08-20 720
邮件的全选、反选、删除选中项 table{ border:1px solid #06F; width:60%; } th{ background-color:#0C0; } td, th{ border:1px solid #00C; } .one{ background-color:#FF0; } .two{ background-color:#0CF; } .over{ bac
vue使用监听实现全选反选功能
08-27
在部分内容中，我们可以看到实现全选反选功能的代码，包括数据的定义、页面代码和 JavaScript 代码。数据的定义中，我们可以看到 allCheck 变量用于记录全选的状态，而 checkArr 数组用于存储每个子集的状态。在页面...
邮件系统html静态网页模版
09-12
邮件系统html静态网页模版
（13）邮箱列表全选、反选、删除
FixedStar 的博客
08-08 933
这是对之前的全选商品列表的checked、行间隔颜色显示和高亮显示的综合练习也涉及到了table中删除一行如何操作（父删子）尤其对checkAllByBut(num)让不同类似操作在同一个方法实现技巧好好理解
checkbox实现的类似邮箱的全选和反选功能
来妞妞的专栏
03-19 657
这是我自己在网上看到的别人写的jquery 实现的类似邮箱的全选和反选功能。 代码如下：
JQuery实现checkbox的全选/取消全选，实现类似于邮箱功能
weixin_30906185的博客
12-14 70
本人初学JQuery。写了一个实现checkbox的全选/取消全选，实现类似于163邮箱功能。 以下是代码，测试全部通过，请勿喷 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascr...
Jquery 全选反选实例代码
11-25
本文给大家分享一段基于jQuery的全选、反选和不选功能的代码，适用于网页多选后需要进行批量操作的场景（如批量删除等）。文章结合实例，代码简洁，基本覆盖选项选择操作的方方面面，希望可以帮到有需要的WEB爱好者...
AngularJS 实现购物车全选反选功能
10-19
通过以上代码，我们成功地实现了购物车的全选和反选功能，同时还能动态更新已选择商品的数量和总金额。这个示例展示了AngularJS如何通过数据绑定和事件处理轻松实现复杂的功能。在实际项目中，还可以根据需求进一步...
AngularJS实现全选反选功能
10-23
主要介绍了AngularJS实现全选反选功能，这里用到AngularJS四大特性之二----双向数据绑定，对angularjs实现全选反选相关知识感兴趣的朋友一起学习吧
简单实现全选反选功能（html）
01-07
在网页开发中，全选和反选功能是常见的交互元素，尤其在表格或者多选项列表中，用户可能希望一键选择所有项目或清除已选。在这个案例中，我们将探讨如何使用HTML和jQuery来实现这一功能。 首先，我们需要创建HTML...
邮件中全选，不选，反选功能
yangyalun的博客
04-08 384
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script&gt; window.onload=function (
js-全选应用
weixin_30568591的博客
03-08 66
代码不多，就当是记录自己的成长吧，欢迎讨论和指导！ 主要功能：全部删除及全选功能，当全部选择是 ，全选框自动勾选，当不足 //批量删除选择 $("#checkAll").on("click",function(){ var checkBox=$("input[name='delete']"); if($("#checkAll").is(":checked")){ ...
在邮箱中常见的，反选，全选，不选。
dgcw2015的博客
10-15 151
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload=function(){...
javascript 常见的应用。复选框：全选，反选；mail地址验证；电话号码验证
学习专栏
12-19 1037
 //方法.根据传入元素的Name,获取它的对象.适用于单选和复选框function $N(elementsName){ return document.getElementsByName(elementsName); }/*方法名 getCheckBoxValuesAry(cBoxName,boolean)返回值:返回复选框checkbox组的某个状态的value值的数组,参数说明,    cB
Javascript-网页编程-DHTML-复选框加强
Discovering,Thinking and Finding——This Is My Logic
07-18 416
选择框的应用（类似如邮件管理） 实现功能：类似如邮箱中对邮件的管理： 选择邮件，删除邮件，全选，反选，取消全选等 [java] view plain copy               DHTML技术演示---checkbox的使用2        "Content-Type" content="text/html; cha
js实现表格的全选，反选，删除所选行以及隔行变色
zunguitiancheng的专栏
06-27 1514
Untitled Document                                        table{                     border:#249bdb 1px solid;                     width:500px;                     border-collapse:collapse;  
HTML——邮箱发送及文件下载
ShyuDai的博客
10-14 859
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;a href=&quo
全选，及反选，及删除全部，批量删除
Mrzhaoplus的博客
11-19 1299
/* 全选---反选 */ $(function(){     $("#ck1").change(function(){            var ck=$("[name='ck']");      for(var i=0;i       if(ck[i].checked){                   ck[i].checked=false;           
vue3实现全选反选功能
最新发布
05-16
在 Vue 3 中实现全选反选功能，可以使用 `v-model` 指令绑定一个布尔值来实现全选和反选的状态切换。具体实现步骤如下： 1. 在 data 中定义一个数组 `items`，用来存储需要全选反选的选项列表。 ```javascript ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值