`
哈达f
  • 浏览: 120282 次
  • 性别: Icon_minigender_1
  • 来自: 广西
社区版块
存档分类
最新评论

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

 
阅读更多 
<!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" onclick="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" onclick="checkAll(1)" />全选</th>
        <th colspan="2">
        	<input type="button" value="全选" onclick="checkByBut(1)" />
            <input type="button" value="取消全选" onclick="checkByBut(0)" />
            <input type="button" value="反选" onclick="checkByBut(2)" />
            <input type="button" value="删除所选邮件" onclick="delMail()" />
       	</th>
        
    </tr>
</table>

</body>
</html>

 

分享到：
| 增加文件
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery表格行全选反选单选代码

    jQuery表格行全选反选单选代码，例子采用bootstrap格式，可以选择自定义。

    简单实现全选反选功能（html）

    在网页开发中，全选和反选功能是常见的交互元素，尤其在表格或者多选项列表中，用户可能希望一键选择所有项目或清除已选。在这个案例中，我们将探讨如何使用HTML和jQuery来实现这一功能。 首先，我们需要创建HTML...

    JS简单表格列表全选反选代码.zip

    这个功能在数据管理、表单处理等场景中十分常见，比如在批量操作数据时，用户可以通过全选按钮一次性选择所有行，或者通过反选取消部分选择。 首先，我们需要了解JavaScript中的DOM（Document Object Model）操作，...

    DataGridView标头CheckBox全选反选

    而在这个特定的场景中，我们需要实现一个增强的功能：在`DataGridView`的列头添加一个`CheckBox`，通过这个`CheckBox`可以实现所有行中对应复选框的全选或反选操作。这个功能在数据管理界面中十分常见，例如在批量...

    android checkbox全选反选

    "Android CheckBox全选反选"这个话题主要涉及如何在ListView中实现CheckBox的选择与反选择操作，包括全选和反选的功能。ListView是Android系统提供的一种列表视图，它可以显示大量数据并允许用户进行交互。下面我们...

    DataGridView表头添加checkbox实现全选反选

    当我们需要在数据表中实现多选功能时，通常会在表头添加一个`Checkbox`，以实现全选或反选所有行的功能。这个过程涉及到事件处理、控件交互以及UI设计等多个方面的知识点。 首先，我们需要在`DataGridView`的表头行...

    全选反选源代码

    ### 全选与反选功能实现 在网页开发过程中，我们经常会遇到需要用户...通过以上分析可以看出，全选与反选功能是Web前端开发中常用且实用的功能之一，掌握其实现原理对于提升网站的用户体验和开发效率具有重要意义。

    JS实现全选反选全不选

    JS实现全选反选全不选

    jquery全选反选插件

    本话题将深入探讨“jQuery全选反选插件”的相关知识点，这对于构建具有复选框全选和反选功能的用户界面非常有用。 首先，jQuery全选反选插件的核心功能是实现复选框的批量选择。在网页上，当用户需要对一组选项进行...

    Javascript实现全选反选

    在JavaScript编程中，"全选反选"功能是常见的用户交互设计，常见于表格或列表数据的批量操作中。这个功能允许用户一键选择或取消选择所有项目，极大地提高了操作效率。下面将详细介绍如何使用JavaScript来实现这个...

    jquery全选反选全不选案例

    "jquery全选反选全不选案例" 是一个常见的交互功能，常见于表格或者列表中，允许用户一键选择或取消所有选项。这个功能在数据筛选、批量操作等场景下非常实用。 实现这一功能的关键在于理解 jQuery 中的选择器和...

    js书写全选反选

    用js书写全选反选的事例，简单明了，源代码，方便易学，可直接引用

    三种方式实现checkbox全选，反选

    全选和反选功能在多选列表中尤其常见，例如在批量操作或者多条件筛选时。以下是三种实现Checkbox全选和反选的方法，以及它们的JavaScript和Java实现细节。 ### 方法一：使用`checked`属性 **JavaScript实现**： 在...

    JS实现全选、反选

    JS JS实现全选反选 全选 反选

    jQuery表格行全选反选单选代码.zip

    本主题聚焦于"jQuery表格行全选反选单选代码"，这是一个利用tableCheckbox.js插件来增强HTML表格功能的示例。下面我们将详细探讨相关的知识点。 首先，`jQuery表格行全选反选单选代码`的核心是实现表格中的复选框...

    jquery实现全选反选功能

    jquery实现全选反选功能，代码可以直接使用，可应用于实际项目当中。

    html全选反选

    很简单的html全选反选，适合刚开始学习html的同学，非常实用。

    实现table表格checkbox复选框的全选 反选

    在网页开发中，表格（Table）是常用的数据...总的来说，实现HTML表格中复选框的全选与反选功能主要依赖于JavaScript和CSS（用于样式），这是一项基础但重要的交互设计。理解并掌握这个功能，有助于提升网页的用户体验。

Magicbox
Global site tag (gtag.js) - Google Analytics