<!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. Redisson使用起来很方便，但是需要redis环境支持eval命令

    Redisson使用起来很方便,但是需要redis环境支持eval命令,否则一切都是悲剧,比如me.结果还是要用RedisCommands去写一套.例子就如下,获得一个RLock锁对象,然后tryLo ...

  2. 捉虫记：SHGetSpecialFolderPath返回错误码为2

    通常我们想获得系统的一些路径时,都会使用一些Shell函数.比如SHGetSpecialFolderPath,SHGetFolderPath,SHGetKnownFolderPath等,传入我们想要的 ...

  3. plsql exist和in 的区别

    <![endif]--> <![endif]--> 发现公司同事很喜欢用exists 和in 做子查询关联,我觉得很有必要研究下 两者的区别,供参考和备忘 /* (这段信息来自 ...

  4. Discuz! x3.1的插件/utility/convert/index.php代码执行漏洞

    漏洞版本: Discuz! x3.1及以下版本 漏洞描述: Discuz! x3.1的插件/utility/convert/index.php存在代码执行漏洞,如果用户在使用完之后不删除,会导致网站容 ...

  5. 【转】JVM 基础知识

    几年前写过一篇关于JVM调优的文章,前段时间拿出来看了看,又添加了一些东西.突然发现,基础真的很重要.学习的过程是一个由表及里,再由里及表的过程,所谓的“温故而知新”.而真正能走完这个轮回的人,也就能 ...

  6. 【CSS】Intermediate8:Page Layout

    1.Layout with CSS is easy. You just take a chunk of your page and shove it wherever you choose 2.pos ...

  7. 三种情形容易引起Azure虚拟机重新启动

      与虚拟机或云服务角色中运行的代码有关的问题可能会导致重新启动.但是,Microsoft 在以下情况下也会重新启动您的角色: 来宾操作系统更新 – 仅影响云服务 Web 和辅助角色.有关如何限制这些 ...

  8. leetcode—Populating Next Right Pointers in Each Node

    1.题目描述 Given a binary tree   struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLink ...

  9. HW1.1

    public class Solution { public static void main(String[] args) { System.out.println("Welcome to ...

  10. HW1.7

    public class Solution { public static void main(String[] args) { System.out.println("π = " ...