<strong>1. 機能要件 </strong>: テーブル内のデータの 1 行おきの色の変更、データの削除、全選択して削除、画像にマウスを移動すると画像のプレビューを表示 <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><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <br><HTML> <br><HEAD> <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>/**Interlaced color change**/ <br>$("table tr:nth-child(odd)").css("background-color","#eee"); <br>/**Select all checkbox click event**/ <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>/**Remove button click event**/ <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>/**Small picture mouse movement event**/ <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>/**Small picture mouse out event**/ <br>$("table tr td img").mouseout(function(){ <br>$("#imgTip").hide(); <br>}); <br>}); <br></script> <br></HEAD> <br><BODY> <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"/> <br></BODY> <br></HTML> <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" >
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
