<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<!--

			1. 确定事件: 文档加载完成 onload

			2. 事件要触发函数: init()

			3. 函数:操作页面的元素

					要操作表格中每一行

					动态的修改行的背景颜色

		-->

		<script >

			function init(){

				//得到表格

				var tab = document.getElementById("tab");

				//得到表格中每一行

				var rows = tab.rows;

				//便利所有的行,然后根据奇数 偶数

				for(var i=1; i < rows.length; i++){

					var row = rows[i];  //得到其中的某一行

					if(i%2==0){

						row.bgColor = "yellow";

					}else{

						row.bgColor = "red"

					}

				}

			}

			/*

				全选和全不选步骤分析:

				 1.确定事件: onclick 单机事件

				 2.事件触发函数: checkAll()

				 3.函数要去做一些事情:

				 	获得当前第一个checkbox的状态

				 	获得所有分类项的checkbox

				 	修改每一个checkbox的状态

			*/

			function checkAll(){

//				获得当前第一个checkbox的状态

				var check1 = document.getElementById("check1");

				//得到当前checked状态

				var checked = check1.checked;

//				 	获得所有分类项的checkbox

//				var checks = document.getElementsByTagName("input");

				var checks = document.getElementsByName("checkone");

//				alert(checks.length);

				for(var i = 0; i < checks.length; i++){

//				 	修改每一个checkbox的状态

					var checkone = checks[i];

					checkone.checked = checked;

				}

			}

		</script>

	</head>

	<body οnlοad="init()">

		<table border="1px" width="600px" id="tab">

			<tr >

				<td>

					<input type="checkbox" οnclick="checkAll()" id="check1" />

				</td>

				<td>分类ID</td>

				<td>分类名称</td>

				<td>分类商品</td>

				<td>分类描述</td>

				<td>操作</td>

			</tr>

			<tr>

				<td>

					<input type="checkbox" name="checkone" />

				</td>

				<td>1</td>

				<td>手机数码</td>

				<td>华为,小米,尼康</td>

				<td>数码产品质量最好</td>

				<td>

					<a href="#">修改</a>|<a href="#">删除</a>

				</td>

			</tr>

			<tr>

				<td>

					<input type="checkbox" name="checkone"/>

				</td>

				<td>2</td>

				<td>成人用品</td>

				<td>充气的</td>

				<td>这里面的充气电动硅胶的</td>

				<td><a href="#">修改</a>|<a href="#">删除</a></td>

			</tr>

			<tr>

				<td>

					<input type="checkbox" name="checkone"/>

				</td>

				<td>3</td>

				<td>电脑办公</td>

				<td>联想,小米</td>

				<td>笔记本特卖</td>

				<td><a href="#">修改</a>|<a href="#">删除</a></td>

			</tr>

			<tr>

				<td>

					<input type="checkbox" name="checkone"/>

				</td>

				<td>4</td>

				<td>馋嘴零食</td>

				<td>辣条,麻花,黄瓜</td>

				<td>年货</td>

				<td><a href="#">修改</a>|<a href="#">删除</a></td>

			</tr>

			<tr>

				<td>

					<input type="checkbox" name="checkone"/>

				</td>

				<td>5</td>

				<td>床上用品</td>

				<td>床单,被套,四件套</td>

				<td>都是套子</td>

				<td><a href="#">修改</a>|<a href="#">删除</a></td>

			</tr>

		</table>

	</body>

</html>

JS隔行换色和全选的实现的更多相关文章

  1. 原生js实现音乐列表（隔行换色、全选）

    一.实现原理: 1.使用 % 运算符实现各行换色,规律:当%前面的值和后面的值相同时  结果为0: 2.使用开关思想,实现在同一个元素上反复点击时的条件判断,并且把开关以属性方式绑定在每个元素上: 3 ...

  2. jQuery表格隔行换色和全选的实现

    1.下载jQuery,并导入:https://blog.csdn.net/weixin_44718300/article/details/88746796 2.代码实现: <!DOCTYPE h ...

  3. JS实现自定义工具类，隔行换色、复选框全选、隔行高亮等

    很多功能都可以放在js的工具类中,在使用的时候直接调用 本次实现的功能包括: /** 0.当点击表的整行的任意位置时,第一列的复选框或者单选框均选中  1.隔行换色 2.复选框的全选效果 3.实现表格 ...

  4. JQuery的使用案例（二级联动，隔行换色，轮播图，广告插入）

    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

  5. JS给TR隔行换色，鼠标经过有动感

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DT ...

  6. php29号小结（隔行换色······）

    1.给表单加样式,可以用css.php与js.js这三种,其中最好用php与js,现在很推广用这种. css3样式隔行换色(table中) tr:nth-child(even){ background ...

  7. js实现表单的隔行换色、鼠标高亮出来等相关内容以及相关事件的作用

    主要是使用的onload().onmouseover和onmouseout的相关应用,满足此次的相关操作. 具体的相关的两个代码如下: <!DOCTYPE html> <html&g ...

  8. 利用JS动态生成隔行换色HTML表格

    用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> 2 <html> 3 <head> 4 <tit ...

  9. js课程 4-11 表格如何实现隔行换色

    js课程 4-11 表格如何实现隔行换色 一.总结 一句话总结:表格奇数行和偶数行判断,赋予不同的样式. 1.表格如何隔行换色? 表格奇数行和偶数行判断,赋予不同的样式. 21 <script& ...

随机推荐

  1. Regression 回归——多项式回归

    回归是指拟合函数的模型.图像等.与分类不同,回归一般是在函数可微的情况下进行的.因为分类它就那么几类,如果把类别看做函数值的话,分类的函数值是离散的,而回归的函数值通常是连续且可微的.所以回归可以通过 ...

  2. 解决vmware 桥联 再次使用联不上网的问题

    在vmare里 编辑 虚拟网络配置   桥联  自动设置 改为你正在联网的网卡  这个问题针对有线网卡 和无限网卡使用的问题

  3. Unity3D渲染优化技巧

    优化图形性能 良好的性能对大部分游戏的成功具有决定作用.下面是一些简单的指导,用来最大限度地提高游戏的图形渲染. 图形需要哪些开销 游戏的图形部分主要开销来自电脑的两个系统: GPU 或 CPU.优化 ...

  4. HomePod即将发售，但硬件不再是苹果的救命稻草

    流年不利的苹果,在多个维度都遭到了重创.除了与高通纠缠不清的专利官司外,iPhone销量还直线下滑并影响到营收.最终,苹果股价.市值都处于暴跌态势.面对内外夹击的不利局面,苹果信奉多年的"封 ...

  5. uboot源码分析2-启动第二阶段

    一.背景知识 1.uboot第二阶段应该做什么? 概括来讲uboot第一阶段主要就是初始化了SoC内部的一些部件(譬如看门狗.时钟),然后初始化DDR并且完成重定位. 由宏观分析来讲,uboot的第二 ...

  6. 017.CI4框架CodeIgniter数据库操作之：Updata更新修改一条数据

    01. 在Model中写入数据库操作的代码如下: <?php namespace App\Models\System; use CodeIgniter\Model; class User_mod ...

  7. Spark Scheduler 模块（上）

    在阅读 Spark 源代码的过程中,发现单步调试并不能很好的帮助理解程序.这样的多线程的分布式系统,更好的阅读源代码的方式是依据模块,分别理解.   在包 org.apache.spark 下面有很多 ...

  8. 项目上线后，遇到IE浏览器不显示大部分组件的问题

    document.addEventListener('touchmove',(evt)=>{ }) 以上是ES6 语法,箭头函数,当然在IE下是不行的啦. 所以改为:ES5语法 document ...

  9. angularJS MVC及$scope作用域

  10. 传入sql语句，执行完提取内容赋值到控件上

    class procedure DBTools.FillStrings(ComboBoxEh: TDBComboBoxEh; sql: string; Default: Boolean = False ...