當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

隔行换色案例||全选和全不选||QQ表情选择||多选下拉列表左右移动

發布時間：2025/4/16 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了隔行换色案例||全选和全不选||QQ表情选择||多选下拉列表左右移动小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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表情选择||多选下拉列表左右移动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。