jquery数据删除与隔行变色的实现代码一例
发布时间：2015-10-12 编辑：jiaochengji.com
为大家介绍一个用jquery实现的表格中数据隔行变色、删除数据、全选删除、鼠标移动到图片时显示图片预览等效果的代码，供大家学习参考。
以下代码实现的功能包括：
表格中数据隔行变色、删除数据、全选删除、鼠标移动到图片时显示图片预览
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>jquery数据管理-数据隔行变色-www.jbxue.com</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <script language="javascript" type="text/javascript" src="/js/jquery-1.8.3.min.js"> </script> <style type="text/css"> body{font-size:12px} table{width:360px;border-collapse:collapse} table tr th,td{border:solid 1px #666;text-align:center} table tr td img{border:solid 1px #ccc;padding:3px;width:42px;height:60px;cursor:hand} table tr td span{float:left;padding-left:12px} table tr th{background-color:#ccc;height:32px} .clsImg{position:absolute;border:solid 1px #ccc;padding:3px;width:85px;height:120px;background-color:#eee;display:none} .btn{border:#666 1px solid;padding:2px;width:50px;filter:progid;DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9DB);} </style> <script type="text/javascript"> $(function(){ /**隔行变色**/ $("table tr:nth-child(odd)").css("background-color","#eee"); /**全选复选框单击事件**/ $("#chkAll").click(function(){ if(this.checked){ $("table tr td input[type=checkbox]").attr("checked",true); }else{ $("table tr td input[type=checkbox]").attr("checked",false); } }); /**删除按钮单击事件**/ $("#btnDel").click(function(){ var intL = $("table tr td input:checked:not('#chkAll')").length; if(intL !=0){ $("table tr td input[type=checkbox]:not('#chkAll')"). each(function(index){ if(this.checked){ $("table tr[id="+this.value+"]").remove(); } }); } }); /**小图片鼠标移动事件**/ var x = 5; var y = 15; $("table tr td img").mousemove(function(e){ $("#imgTip").attr("src",this.src).css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show(3000); }); /**小图片鼠标移出事件**/ $("table tr td img").mouseout(function(){ $("#imgTip").hide(); }); }); </script> </HEAD> <BODY> <table> <tr> <th>选项</th> <th>编号</th> <th>封面</th> <th>购书人</th> <th>性别</th> <th>购书价</th> </tr> <tr id="0"> <td><input id="Checkbox1" type="checkbox" value="0"/></td> <td>1001</td> <td><img src="Images/img03.jpg" alt=""></td> <td>刘明明</td> <td>女</td> <td>37.80元</td> </tr> <tr id="1"> <td><input id="Checkbox2" type="checkbox" value="1"/></td> <td>1002</td> <td><img src="Images/img04.jpg" alt=""></td> <td>李小明</td> <td>男</td> <td>35.60元</td> </tr> <tr id="2"> <td><input id="Checkbox3" type="checkbox" value="2"/></td> <td>1003</td> <td><img src="Images/img08.jpg" alt=""></td> <td>张小星</td> <td>女</td> <td>45.60元</td> </tr> </table> <table> <tr> <td style="text-align:left;height:28px"> <span> <input id="chkAll" type="checkbox"/>全选 </span> <span> <input id="btnDel" type="button" value="删除" class="btn"/> </span> </td> </tr> </table> <img id="imgTip" class="clsImg" src="Images/img03.gif"/> </BODY> </HTML>2、效果图如下所示：
您可能感兴趣的文章：
javascript实现隔行变色函数代码一例
jQuery 表格隔行换色 鼠标高亮行变色的实现代码
jquery数据删除与隔行变色的实现代码一例
js 隔行变色的最简单代码
JS控制表格隔行变色的实现代码
JQuery实现表格隔行换色(隔行变色)效果代码一例
jQuery 行背景颜色的交替显示(隔行变色)实现代码
js 隔行变色与鼠标悬停自动变色的实现代码
js 隔行变色 鼠标经过变色的代码
Js实现表格隔行变色，鼠标经过时高亮显示的代码
[关闭]