<!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. Spring AOP实现方式三之自动扫描注入【附源码】

    注解AOP实现  这里唯一不同的就是application 里面 不需要配置每个bean都需要配置了,直接自动扫描 注册,主要知识点是怎么通过配置文件得到bean, 注意类前面的@注解. 源码结构: ...

  2. 【POJ】1141 Brackets Sequence

    经典DP问题,注意输入不要使用while(xxx != EOF),否则WA,测试数据只有一组.同样的测试数据可能有多种答案.但最小长度唯一.一定不能用while,切记. #include <io ...

  3. v2ex上100个话题

    V2EX 是创意工作者们的社区. 这里目前汇聚了超过 110,000 名主要来自互联网行业.游戏行业和媒体行业的创意工作者. V2EX在华人IT圈占有举足轻重的地位. 近来闲的蛋疼,按照4个不同的指标 ...

  4. css滑动门制作圆角按钮

    之前做项目的时候,基本都是将圆角背景图切成三块,故而每次用的标签都超级多,a标签中总是包含三个span,然后里面还得放按钮,导航冗余标签极多. 事实上是之前理解的滑动门的精髓不够到位. 现在有两种方式 ...

  5. Java数值转化为二进制、十进制、十六进制字符串

    int i = 123;String binStr = Integer.toBinaryString(i); String otcStr = Integer.toOctalString(i); Str ...

  6. CORREL

    CORREL Show All Returns the correlation coefficient of the array1 and array2 cell ranges. Use the co ...

  7. HDU4725 The Shortest Path in Nya Graph dij

    分析:对于每一层,原来n个点,然后扩展为原来的三倍,每一层扩展一个入点,一个出点,然后跑最短路 注:tmd我把一个n写成m了,然后wa了7次,我都要怀疑人生了 #include<cstdio&g ...

  8. HDU-1896 Stones

    http://acm.hdu.edu.cn/showproblem.php?pid=1896 题意:一个人从0开始走起,遇到偶数个石头就踢.要是同一位置有多个石头,则先扔最重的石头(也就是扔的最近的那 ...

  9. 配置Memcache服务器并实现主从复制功能（repcached）(转)

    1.repcached介绍repcached 是日本人开发的实现memcached复制功能,它是一个单 master单 slave的方案,但它的 master/slave都是可读写的,而且可以相互同步 ...

  10. 【原】Spark中Job的提交源码解读

    版权声明:本文为原创文章,未经允许不得转载. Spark程序程序job的运行是通过actions算子触发的,每一个action算子其实是一个runJob方法的运行,详见文章 SparkContex源码 ...