<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><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <br><HTML> <br><HEAD> <br><TITLE> 数据管리 </TITLE> <br><META NAME="생성기" CONTENT="EditPlus"> <br><META NAME="저자" CONTENT=""> <br><META NAME="키워드" CONTENT=""> <br><META NAME="설명" CONTENT=""> <br><script 언어="javascript" type="text/javascript" src="jquery-1.8.3.min.js"> <br></script> <br><style type="text/css"> <br>본체{글꼴 크기:12px} <br>테이블{너비:360px;border-collapse:collapse} <br>테이블 tr th,td{border:solid 1px #666;text-align:center} <br>테이블 tr td img{테두리:솔리드 1px #ccc;패딩:3px;너비:42px;높이:60px;커서:손} <br>테이블 tr td 스팬{float:left;padding-left:12px} <br> 테이블 tr th{배경색:#ccc;높이:32px} <br>.clsImg{위치:절대;테두리:단색 1px #ccc;패딩:3px;너비:85px;높이:120px;배경색:#eee ;디스플레이:없음} <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>$("테이블 tr:nth-child(odd)").css("배경색","#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; <br>$("테이블 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></HEAD> <br><BODY> <br><테이블> <br><tr> <br>选项일> <br><일>编号</일> <br>면 <br><th>购书人</th> <br><th>성별</th> <br>购书价일> <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></테이블> <br><테이블> <br><tr> <br><td style="text-align:left;height:28px"> <br><스팬> <br><input id="chkAll" type="checkbox"/>전체选 <br></span> <br><스팬> <br><input id="btnDel" type="button" value="删除" class="btn"/> <br></span> <br></td> <br></tr> <br></테이블> <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" >
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
