<!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. plsql 高效原则

    sql优化是项复杂的工作,不能简单而论,但是在平时书写脚本时的一些细节可以大大提高我们编写代码的效率,提高代码质量. 以下这些规则部分是我的经验,部分是网络资料,整理后在我平时的工作中运用后得到验证的 ...

  2. 【HDOJ】1061 Rightmost Digit

    这道题目可以手工打表,也可以机器打表,千万不能暴力解,会TLE. #include <stdio.h> #define MAXNUM 1000000001 ][]; int main() ...

  3. 学习Python前序

    最近一直在学习有关Python语言.回顾的时候,发现学习过程中的有些东西被遗漏了.故记录在此......加深记忆,方便查找. The reason:     语言如此多,why choose Pyth ...

  4. MongoDB(索引及C#如何操作MongoDB)(转载)

    MongoDB(索引及C如何操作MongoDB) 索引总概况 db.test.ensureIndex({"username":1})//创建索引 db.test.ensureInd ...

  5. C++类型引用浅析

    C++类型引用浅析 引言 从最早被Bjarne Stroustrup 发明,作为C语言的扩展,到广为人知C++98标准,再到最新的C++11.C++14和C++17标准,C++一直在不断地进步.演化. ...

  6. 【原】Spark中Client源码分析（二）

    继续前一篇的内容.前一篇内容为: Spark中Client源码分析(一)http://www.cnblogs.com/yourarebest/p/5313006.html DriverClient中的 ...

  7. Windows Azure的故障检测和重试逻辑

    高度可用的应用程序设计的一个关键点,是利用代码中的重试逻辑正常处理临时中断的服务.Microsoft 模式和实践团队开发的暂时性故障处理应用程序块可协助应用程序开发人员完成此过程.“暂时性”一词表示仅 ...

  8. vim配置vimrc详解

    vimrc的存放位置: 系统 vimrc 文件: "$VIM/vimrc" 用户 vimrc 文件: "$HOME/.vimrc" 用户 exrc 文件: &q ...

  9. scala学习笔记（四）样本类与模式匹配

    访问修饰符 格式:private[x]或protected[x],x指某个所属包.类或单例对象,表示被修饰的类(或方法.单例对象),在X域中公开,在x域范围内都可以访问: private[包名]:在该 ...

  10. HDOJ-ACM1019(JAVA) 多个数的最小公倍数

    题意:求多个数的最小公倍数 很简单,但是我一开始的做法,估计会让结果越界(超过int的最大值) import java.util.*; import java.io.*; public class M ...