:表格中数据隔行变色、删除数据、全选删除、鼠标移动到图片时显示图片预览
2、示例代码如下:
<script language="javascript" type="text/javascript" src="jquery-1.8.3.min.js"> <br></script>
<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>
| 选项 | 编号 | 封面 | 购书人 | 性别 | 购书价 |
|---|---|---|---|---|---|
| 1001 | ![]() | 刘明明 | 女 | 37.80元 | |
| 1002 | ![]() | 李小明 | 男 | 35.60元 | |
| 1003 | ![]() | 张小星 | 女 | 45.60元 |
| 全选 |

3、效果图预览
: 













