<strong>1、功能需求</strong>：表格中数据隔行变色、删除数据、全选删除、鼠标移动到图片时显示图片预览 <br><strong>2、示例代码如下</strong>： <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="71271" class="copybut" id="copybut71271" onclick="doCopy('code71271')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code71271"> <br> <br> <br> <br><title> 数据管理 </title> <br><meta name="Generator" content="EditPlus"> <br><meta name="Author" content=""> <br><meta name="Keywords" content=""> <br><meta name="Description" content=""> <br><script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"> <BR></script> <br><style type="text/css"> <BR>body{font-size:12px} <BR>table{width:360px;border-collapse:collapse} <BR>table tr th,td{border:solid 1px #666;text-align:center} <BR>table tr td img{border:solid 1px #ccc;padding:3px;width:42px;height:60px;cursor:hand} <BR>table tr td span{float:left;padding-left:12px} <BR>table tr th{background-color:#ccc;height:32px} <BR>.clsImg{position:absolute;border:solid 1px #ccc;padding:3px;width:85px;height:120px;background-color:#eee;display:none} <BR>.btn{border:#666 1px solid;padding:2px;width:50px;filter:progid;DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9DB);} <BR></style> <br><script type="text/javascript"> <BR>$(function(){ <BR>/**隔行变色**/ <BR>$("table tr:nth-child(odd)").css("background-color","#eee"); <BR>/**全选复选框单击事件**/ <BR>$("#chkAll").click(function(){ <BR>if(this.checked){ <BR>$("table tr td input[type=checkbox]").attr("checked",true); <BR>}else{ <BR>$("table tr td input[type=checkbox]").attr("checked",false); <BR>} <BR>}); <BR>/**删除按钮单击事件**/ <BR>$("#btnDel").click(function(){ <BR>var intL = $("table tr td input:checked:not('#chkAll')").length; <BR>if(intL !=0){ <BR>$("table tr td input[type=checkbox]:not('#chkAll')"). each(function(index){ <BR>if(this.checked){ <BR>$("table tr[id="+this.value+"]").remove(); <BR>} <BR>}); <BR>} <BR>}); <BR>/**小图片鼠标移动事件**/ <BR>var x = 5; var y = 15; <BR>$("table tr td img").mousemove(function(e){ <BR>$("#imgTip").attr("src",this.src).css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show(3000); <BR>}); <BR>/**小图片鼠标移出事件**/ <BR>$("table tr td img").mouseout(function(){ <BR>$("#imgTip").hide(); <BR>}); <BR>}); <BR></script> <br> <br> <br><table> <br><tr> <br><th>选项</th> <br><th>编号</th> <br><th>封面</th> <br><th>购书人</th> <br><th>性别</th> <br><th>购书价</th> <br> </tr> <br><tr id="0"> <br><td><input id="Checkbox1" type="checkbox" value="0"></td> <br><td>1001</td> <br><td><img src="Images/img03.jpg" alt=""></td> <br><td>刘明明</td> <br><td>女</td> <br><td>37.80元</td> <br> </tr> <br><tr id="1"> <br><td><input id="Checkbox2" type="checkbox" value="1"></td> <br><td>1002</td> <br><td><img src="Images/img04.jpg" alt=""></td> <br><td>李小明</td> <br><td>男</td> <br><td>35.60元</td> <br> </tr> <br><tr id="2"> <br><td><input id="Checkbox3" type="checkbox" value="2"></td> <br><td>1003</td> <br><td><img src="Images/img08.jpg" alt=""></td> <br><td>张小星</td> <br><td>女</td> <br><td>45.60元</td> <br> </tr> <br> </table> <br><table> <br><tr> <br><td style="text-align:left;height:28px"> <br><span> <br><input id="chkAll" type="checkbox">全选 <br></span> <br><span> <br><input id="btnDel" type="button" value="删除" class="btn"> <br></span> <br> </td> <br> </tr> <br> </table> <br><img id="imgTip" class="clsImg" src="Images/img03.gif" alt="jquery入门—数据删除与隔行变色以及图片预览_jquery" > <br> <br> <br> </div> <br><strong>3、效果图预览</strong>： <br><img style="max-width:90%" src="http://files.jb51.net/file_images/article/201301/201317110822878.jpg" style="max-width:90%" alt="jquery入门—数据删除与隔行变色以及图片预览_jquery" >
