隔行换色案例||全选和全不选||QQ表情选择||多选下拉列表左右移动
2024-06-05 07:06:24
01.隔行换色.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../../js/jquery-3.3.1.min.js"></script><script>//需求：将数据行的奇数行背景色设置为 pink，偶数行背景色设置为 yellow$(function () {//1. 获取数据行的奇数行的tr，设置背景色为pink$("tr:gt(1):odd").css("backgroundColor","pink");//2. 获取数据行的偶数行的tr,设置背景色为yellow$("tr:gt(1):even").css("backgroundColor","yellow");});</script></head><body><table id="tab1" border="1" width="800" align="center" ><tr><td colspan="5"><input type="button" value="删除"></td></tr><tr style="background-color: #999999;"><th><input type="checkbox"></th><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td><input type="checkbox"></td><td>0</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>1</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><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox"></td><td>3</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr></table></body>
</html>
全选和全不选.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../../js/jquery-3.3.1.min.js"></script><script>//分析：需要保证下边的选中状态和第一个复选框的选中状态一致即可function selectAll(obj){//获取下边的复选框$(".itemSelect").prop("checked",obj.checked);}</script></head><body><table id="tab1" border="1" width="800" align="center" ><tr><td colspan="5"><input type="button" value="删除"></td></tr><tr><th><input type="checkbox" onclick="selectAll(this)" ></th><th>分类ID</th><th>分类名称</th><th>分类描述</th><th>操作</th></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>1</td><td>手机数码</td><td>手机数码类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>2</td><td>电脑办公</td><td>电脑办公类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>3</td><td>鞋靴箱包</td><td>鞋靴箱包类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr><tr><td><input type="checkbox" class="itemSelect"></td><td>4</td><td>家居饰品</td><td>家居饰品类商品</td><td><a href="">修改</a>|<a href="">删除</a></td></tr></table></body>
</html>
QQ表情选择.html
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><title>QQ表情选择</title><script src="../../js/jquery-3.3.1.min.js"></script><style type="text/css">*{margin: 0;padding: 0;list-style: none;}.emoji{margin:50px;}ul{overflow: hidden;}li{float: left;width: 48px;height: 48px;cursor: pointer;}.emoji img{ cursor: pointer; }</style><script>//需求：点击qq表情，将其追加到发言框中$(function () {//1.给img图片添加onclick事件$("ul img").click(function(){//2.追加到p标签中即可。$(".word").append($(this).clone());});});</script></head>
<body><div class="emoji"><ul><li><img src="img/01.gif" height="22" width="22" alt="" /></li><li><img src="img/02.gif" height="22" width="22" alt="" /></li><li><img src="img/03.gif" height="22" width="22" alt="" /></li><li><img src="img/04.gif" height="22" width="22" alt="" /></li><li><img src="img/05.gif" height="22" width="22" alt="" /></li><li><img src="img/06.gif" height="22" width="22" alt="" /></li><li><img src="img/07.gif" height="22" width="22" alt="" /></li><li><img src="img/08.gif" height="22" width="22" alt="" /></li><li><img src="img/09.gif" height="22" width="22" alt="" /></li><li><img src="img/10.gif" height="22" width="22" alt="" /></li><li><img src="img/11.gif" height="22" width="22" alt="" /></li><li><img src="img/12.gif" height="22" width="22" alt="" /></li></ul><p class="word"><strong>请发言：</strong><img src="img/12.gif" height="22" width="22" alt="" /></p></div>
</body>
</html>
多选下拉列表左右移动.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../../js/jquery-3.3.1.min.js"></script><style>#leftName , #btn,#rightName{float: left;width: 100px;height: 300px;}#toRight,#toLeft{margin-top:100px ;margin-left:30px;width: 50px;}.border{height: 500px;padding: 100px;}</style><script>//需求：实现下拉列表选中条目左右选择功能$(function () {//toRight$("#toRight").click(function () {//获取右边的下拉列表对象，append(左边下拉列表选中的option)$("#rightName").append($("#leftName > option:selected"));});//toLeft$("#toLeft").click(function () {//appendTo 获取右边选中的option，将其移动到左边下拉列表中$("#rightName > option:selected").appendTo($("#leftName"));});});</script></head><body><div class="border"><select id="leftName" multiple="multiple"><option>张三</option><option>李四</option><option>王五</option><option>赵六</option></select><div id="btn"><input type="button" id="toRight" value="-->"><br><input type="button" id="toLeft" value="<--"></div><select id="rightName" multiple="multiple"><option>钱七</option></select></div></body>
</html>
隔行换色案例||全选和全不选||QQ表情选择||多选下拉列表左右移动相关推荐
- JQuery基础-》带有案例-隔行换色-全选-QQ表情-下拉框左右移动
JQuery基础 下面案例用到的资源包:https://download.csdn.net/download/weixin_44537122/11879014 1.内容 1. JQuery 基础:1. ...
- 【前端3】jquary：页面加载，选择器，隔行换色，Dom，全选，动画，遍历，广告/抽奖，表单校验插件
文章目录 1.jquery框架引入:$("mydiv") 当成id选择器 2.jquery版本/对象:$(js对象) -> jquery对象 3.jquery的页面加载事件: ...
- Javascript知识【案例：表格隔行换色】
目录 1,案例1:表格隔行换色 2,案例2:鼠标移入粉色,移出原色[基础+] 2.1:需求说明 2.2:前置知识:鼠标移入移出事件 2.3:前置拓展知识:this关键字 2.4:分析&实现 1 ...
- Web前端第四季(jQuery):四:301-jQuery基本过滤器(奇数和偶数)+302-实现隔行换色+401-祖先选择器和子代选择器
目录 一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 2.SIKI学院:我参考此视频实操 3.w3school ...
- 骂骂咧咧的 fastreport 数据隔行换色
1, 我要吐槽的是, 这破玩意怎么现在还有人在用??? md, 找个文档要找老半天, 还没有, 社区也没有, 还得自己猜 2, 先看数据格式 2.1 数据格式 dataList, 就是我们的数据表, ...
- SSRS 2012 聚合函数 -- 隔行换色示例
SSRS 2012 聚合函数 -- 隔行换色示例 有时我们希望报表能够显示出数据笔数的流水序号,如果要使用T-SQL查询来做出这种效果,通常必须使用RANK函数以自动产生编号,在此将介绍如何使用SSR ...
- AJAX实现页面选项卡、隔行换色、弹出层功能代码
代码简介:AJAX实现页面选项卡.隔行换色.弹出层功能代码 代码内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- 在PHP当中制作隔行换色的效果以及制作上下翻页的效果！
首先说明隔行换色的效果,需要用到tr:nth_child(odd);或者括号里的值是even,odd是从第一行开始隔一行,even是从第二行开始: 具体代码如下图案所示: 1 <style> ...
- ListView数据项隔行换色控制实现详解
看到有朋友在群里问过ListView项达到一定数量时加不同色选项的功能,有时间就学习了下ListView隔行换色的效果,大体效果实现出来了,吼吼,写博客里面,跟大家学习交流,一样的,先贴效果,再上代码 ...
最新文章
- Entity Framework 约定
- 静态方法和实例化方法的区别
- 简单看正则（grep)
- centos6创建用户，设置ssh登录
- BZOJ 1800 [Ahoi2009]fly 飞行棋
- Git之创建远程分支和删除远程分支
- oraoledb.oracle 12c,关于OraOLEDB.Oracle找不到驱动问题的一种可能解决方案
- Keil | 解决Keil双击工程名无法打开.map的问题
- Elixir：可能成为下一代Web开发语言
- PyTorch——Ubuntu上Pytorch的安装教程
- Entity Framework -- 使用类别字段的实体继承关系
- 【图】max51开发板top页
- ASP.NET MVC 第四个预览版（第一部分）
- HDU Problem 1285 确定比赛名次【拓扑排序】
- 每日一记:2017.7.20
- matlab中如何使用help,MATLAB中如何使用help？怎样看matlab的help
- [laravel]laravel8自动生成api文档
- matlab的多变量dmc源程序,基于MATLAB多变量DMC算法仿真技术研究
- Karl Guttag：Magic Leap 2与HoloLens 2对比
- 半小时速通【页面数据分页】