WEB前端知识大整合之Jquery表单隔行换色

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="../js/jquery-1.11.0.js" ></script><!--1. 导入JQ的包2. 文档加载完成函数: 页面初始化3. 获得所有的行 :   元素选择器4. 根据行号奇数/偶数去修改颜色--><script>$(function(){//获得所有的行 :   元素选择器$("tbody > tr:even").css("background-color","#CCCCCC");//修改基数行$("tbody > tr:odd").css("background-color","#FFF38F");
//                $("tbody > tr").css("background-color","#FFF38F");
                });</script></head><body><table border="1px" width="600px" id="tab"><thead><tr ><td><input type="checkbox" /></td><td>分类ID</td><td>分类名称</td><td>分类商品</td><td>分类描述</td><td>操作</td></tr></thead><tbody><tr><td><input type="checkbox" /></td><td>1</td><td>手机数码</td><td>华为,小米,尼康</td><td>黑马数码产品质量最好</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td><input type="checkbox" /></td><td>2</td><td>成人用品</td><td>充气的</td><td>这里面的充气电动硅胶的</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td><input type="checkbox" /></td><td>3</td><td>电脑办公</td><td>联想,小米</td><td>笔记本特卖</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td><input type="checkbox" /></td><td>4</td><td>馋嘴零食</td><td>辣条,麻花,黄瓜</td><td>年货</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td><input type="checkbox" /></td><td>5</td><td>床上用品</td><td>床单,被套,四件套</td><td>都是套子</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr></tbody></table></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="../js/jquery-1.11.0.js" ></script><script >$(function(){// 后代选择器   选择器  选择器 儿子孙子// 子元素选择器  　：　　子元素
                $("tbody > tr").css("background-color","#FF0000");　});</script></head><body><table border="1px" width="600px" id="tab"><tr ><td><input type="checkbox" /></td><td>分类ID</td><td>分类名称</td><td>分类商品</td><td>分类描述</td><td>操作</td></tr><tr><td><input type="checkbox" /></td><td>1</td><td>手机数码</td><td>华为,小米,尼康</td><td>黑马数码产品质量最好</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td><input type="checkbox" /></td><td>2</td><td>成人用品</td><td>充气的</td><td>这里面的充气电动硅胶的</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td><input type="checkbox" /></td><td>3</td><td>电脑办公</td><td>联想,小米</td><td>笔记本特卖</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td><input type="checkbox" /></td><td>4</td><td>馋嘴零食</td><td>辣条,麻花,黄瓜</td><td>年货</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr><tr><td><input type="checkbox" /></td><td>5</td><td>床上用品</td><td>床单,被套,四件套</td><td>都是套子</td><td><a href="#">修改</a>|<a href="#">删除</a></td></tr></table></body>
</html>

转载于:https://www.cnblogs.com/yangshuyuan1009/p/11309030.html

WEB前端知识大整合之Jquery表单隔行换色相关推荐

视频教程-Web前端开发利器 SPRY框架之表单验证-JavaScript
Web前端开发利器 SPRY框架之表单验证有17年互联网行业从业经验,始终在教学第一线,勇于创新,从有效教学,不断向高效教学转变.始终坚持"学生为主体,教师为主导:商业化案例,企业化情境& ...
web前端必学功法之一：表单校验（2）
web前端必学功法之一:表单校验(2) 这里采用另一种写法,jQuery写法,在用jQuery写法之前,一定要引入jquery.js. <div class="container&qu ...
web前端必学功法之一：表单校验（1）
web前端必学功法之一:表单校验案例效果: 这里的布局采用的是bootstrap布局 <div class="container" style="margin-t ...
WEB前端 ---- 学习第二天(表格、表单、css等)
今日内容概要表格标签(只要是展视数据一般都可以使用表格标签) 表单标签(重要:获取前端用户数据发送给后端) 后端框架基本使用(flask) css层叠样式表(选择器) 表格标签数据示例: use ...
【HTML5】Web前端——第三课：HTML5 表单相关元素和属性
知识点:原有的表单元素及表单控件.HTML5 表单新增功能类型.HTML5 表单控件新增的属性推荐阅读:HTML+CSS第四课:表单标签的使用-制作注册表单 1.原有的表单元素及表单控件表单,是页 ...
WEB前端网页设计 HTML网页代码 - 表单参数
目录表单语法表单元素格式表单元素格式表单元素表单的高级应用表单元素的标注表单的初级验证表单验证的好处表单初级验证的方法 placeholder required pattern 创建 ...
WEB前端 | HTML基础——(5)表格和表单
一.表格 <!doctype html> <html><head><meta charset="utf-8"/><title& ...
前端html利用CSS实现table表格斑马纹隔行换色效果
在网页中,表格是一种常用的数据展示方式,如下面的实例就是一个收支数据的表格. <!DOCTYPE html> <html lang="en"><hea ...
Web前端知识技能大汇总
Web前端知识技能大汇总来源:github 发布时间:2015-07-08 阅读次数:3432 28 项目起源还记得@jayli 的这幅前端知识结构图么. 图片的形式具有诸多的不便.缺失源图的我们 ...

WEB前端知识大整合之Jquery表单隔行换色

WEB前端知识大整合之Jquery表单隔行换色相关推荐

最新文章

热门文章