<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>演示checkbox功能</title>
<link rel="stylesheet" type="text/css" href="table.css">/*这里写了table中颜色，等的属性*/
<script type="text/javascript">
var cName;
function trColor(){/*这个函数是设置表格中奇数行与偶数行的颜色差别 */
var Tb=document.getElementById("mailTable");/* 一般而言如果id这个属性值是唯一的，所以一般设置一个id属性值 */
var srow=Tb.rows;
for(var i=1;i<srow.length;i++){
if(i%2==1){
srow[i].className="one";
}
else{
srow[i].className="two";
}
srow[i].onmouseover=function(){
cName=this.className;
this.className="over";
}
srow[i].onmouseout=function(){
this.className=cName;
}
}
}
onload=trColor;
/* 这里写成onload=trColor();是指的调用trColor这个函数，而上面那样写是将这个函数赋给onload */
function delMail(){
var cbox=document.getElementsByName("mail");
/* 如果是按顺序删除的话就会出现bug---连着删几个选项就会发现问题,倒序删除会避免发生这样的问题*/
for(var i=cbox.length-1;i>=0;i--){
if(cbox[i].checked){
var obj=cbox[i];
while(obj.nodeName!="TR"){
obj=obj.parentNode;
}
var oTr=obj;
obj.parentNode.removeChild(oTr);
}
}
trColor();
}
</script>
</head>
<body>
<h1>演示table和checked组件</h1>
<table id="mailTable">
<tr>
<th>全选</th>
<th>发件人</th>
<th>邮件标题</th>
<th>附件</th>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>张三</td>
<td>邮件1标题</td>
<td><a href="#">附件1</a>，附件2</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>张三</td>
<td>邮件2标题</td>
<td><a href="#">附件3</a>，附件4</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>张三</td>
<td>邮件3标题</td>
<td><a href="#">附件5</a>，附件6</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>张三</td>
<td>邮件4标题</td>
<td><a href="#">附件7</a>，附件8</td>
</tr>
<tr>
<td><input type="checkbox" name="mail"></td>
<td>张三</td>
<td>邮件标5题</td>
<td><a href="#">附件9</a>，附件10</td>
</tr>
</table>
<input type="button" value="删除邮件" onclick="delMail();">

</body>
</html>

---------------------------------------------------------

@CHARSET "UTF-8";
table{
border: 1px solid #00ffff;
width:500px;
border-collapse:collapse;
}
td{
border: 1px solid #00ffff;
}
.one{
background-color:#ffff00;
}
.two{
background-color:#c6baef;
}
.over{
background-color:#ffffff;
}

JS中checkbox组件的使用的更多相关文章

  1. vue.js中父组件触发子组件中的方法

    知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...

  2. js中checkbox反选

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. js中checkbox的全选和反选的实现

    <head> <meta charset="utf-8"/> <script type="text/javascript"> ...

  4. 20160113 JS中CheckBox如何控制全选

    //判断CheckBoxzong他的点击事件 $("#CheckBoxzong").click(function () { //取出所有class为选中的集合 var query ...

  5. [vue]webpack中使用组件

    https://blog.csdn.net/ywl570717586/article/details/79984909 vue.js中全局组件 全局组件的定义 <!DOCTYPE html> ...

  6. React中父子组件数据传递

    Vue.js中父子组件数据传递:Props Down ,  Events Up Angular中父子组件数据传递:Props Down,  Events  Up React中父子组件数据传递:Prop ...

  7. Javascript - Vue - webpack中的组件、路由和动画

    引入vue.js 1.cnpm i vue -S 2.在mian.js中引入vue文件 import Vue from "vue"//在main.js中使用这种方式引用vue文件时 ...

  8. C#中??和？分别是什么意思？ 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中，对象相等和对象一致分别指的是什么？

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  9. MVC项目中使用js 设置Checkbox的选中事件

    要实现的效果是,当点击checkbox时,跳转到Action中 CheckBox实例: View界面: @Html.CheckBox("prd.IsChecked", Model. ...

随机推荐

  1. Server.MapPath()目录详解

    最近在做相关的开发,碰到了Server.MapPath(),顺便来温习一下 Server.MapPath()获取网站的目录详解  ./当前目录 /网站主目录 ../上层目录 ~/网站虚拟目录 如果当前 ...

  2. tyvj 1729 文艺平衡树

    文艺平衡树 From admin 背景 Background 此为平衡树系列第二道:文艺平衡树 描述 Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以 ...

  3. c程序设计语言_习题7-6_对比两个输入文本文件_输出它们不同的第一行_并且要记录行号

    Write a program to compare two files, printing the first line where they differ. Here's Rick's solut ...

  4. HTTP2.0那些事

    1. HTTP2.0的前世 http2.0的前世是http1.0和http1.1这两兄弟.虽然之前仅仅只有两个版本,但这两个版本所包含的协议规范之庞大,足以让任何一个有经验的工程师为之头疼.http1 ...

  5. SharePoint 2013版本功能对比介绍

    转:http://www.fengfly.com/plus/view-213720-1.html 在SharePoint使用中,经常纠结于版本问题,SharePoint 2013主要有免费的Found ...

  6. C#创建https请求并使用pfx证书

    常规情况下创建Web请求,并获取请求数据的代码如下: WebRequest req = WebRequest.Create(url); req.Timeout = 15000; WebResponse ...

  7. 求正整数n所有可能的和式的组合（如；4=1+1+1+1、1+1+2、1+3、2+1+1、2+2

    作者:张小二 nyoj90 ,可以使用递归的方式直接计算个数,也可以通过把满足的个数求出来计数,因为在juLy博客上看到整数划分,所以重写了这个代码,就是列出所m的可能性,提交后正确.acmer的入门 ...

  8. Java笔记(十七)……异常

    异常概述 异常是什么 是对问题的描述,将问题进行对象的封装 异常体系 Throwable |---Error |---Exception |---RuntimeException 异常体系的特点 异常 ...

  9. 我的新顶级域名vell001.ml

    好不容易找到了一个免费的顶级域名啊,各种爽啊... 没钱的娃就只能各种求免费了!!! 以后访问我的所有站点都可以从vell001.ml开始了 Vell001主站 VellBlog VellForum

  10. sudo 和 sudoers设置

    转: http://www.cnblogs.com/zhuowei/archive/2009/04/13/1435190.html sudo是linux下常用的允许普通用户使用超级用户权限的工具,允许 ...