<div class="codetitle"> <span><a style="CURSOR: pointer" data="34014" class="copybut" id="copybut34014" onclick="doCopy('code34014')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code34014"> <br>1. 데이터 준비<br><table id="table1"> <br><tr><th>글 제목</th></th> <th> 해제 시간</th> <th>작업</th> <br><tr> <td>테스트</td> <td>테스트 </td> <td>테스트</td><td>테스트</td></tr> td>테스트</td><td>테스트</td></tr> 테스트</td> <td>테스트</td> <br> <br><table id="table2"> <br><tr> <td> ;기사 제목</td> <td>기사 카테고리</td> <td>게시 시간</td> <td>작업</td> </tr> <br><tr>< ;td>테스트</td><td>테스트</td><td>테스트</td><td> ;테스트</td></tr> <BR><tr><td> ;테스트</td><td>테스트</td><td>테스트</td>< ;td>테스트</td></tr> ;<td>테스트</td>< /tr> <br></table> <br><thead><br></thead> tbody> <br> </tr> <tr> <td>테스트</td> <td>테스트</td> <td>테스트</td> ;<td>테스트</td> </tr> <br><tr> <td>테스트</td> <td>테스트</td> <td>테스트</td> <td>테스트</td></tr> /td><td>테스트</td></tr> <br></tbody> <br><table id="table4"> <br><tr> <td>기사 제목</td> <td>기사 카테고리</td> <td>게시 시간</td> <td>작업</td></thead> <br><td><td><td>테스트</td> <br>< tr><td>테스트</td> <td>테스트</td> <td>테스트</td> <td>테스트</td> </tr> <br><tr> ;<td>테스트</td><td>테스트</td><td>테스트</td><td>테스트</td></tr> ;td>테스트 3</td>< ;td>테스트</td><td>테스트</td><td>테스트</td></tr> 🎜></table> <br>2. 작업<br><script type="text/javascript"> <br>//1.마우스를 움직이면 행 색상이 변경됩니다<br>$("# table1 tr").hover(function(){ <br>$(this).children("td").addClass("hover") <br>},function(){ <br>$(this).children ("td").removeClass("hover" ) <br>}) <br>$("#table2 tr:gt(0)").hover(function() { <br>$(this).children( "td").addClass("hover") ; <br>}, function() { <br>$(this).children("td").removeClass("hover");); <br>//2. 홀수 행과 짝수 행의 색상이 다릅니다<br>$("#table3 tbody tr:odd").css("Background-color", "#bbf"); "#table3 tbody tr:even").css("배경색","#ffc") <br>$("#table3 tbody tr:odd").addClass("odd") <br>$( "#table3 tbody tr:even").addClass("even") <br>//3. 행 숨기기<br>$("#table3 tbody tr:eq(3)").hide(); >//4 .열 숨기기<br>$("#table5 tr td::nth-child(3)").hide() <br>$("#table5 tr").each(function() {$("td :eq(3)",this).hide()}); <br>//5. 한 행 삭제<br>// 첫 번째 행을 제외한 모든 행 삭제<br>$("# table6 tr:not (:first)").remove(); <br>//6. 열 삭제 <br>// 첫 번째 열을 제외한 모든 열 삭제 <br>$("#table6 tr td:not( :nth- child(1))").remove(); <br>//7. 특정 셀의 값을 가져옵니다(설정) <br>//두 번째 tr의 첫 번째 td인 table7의 값을 설정합니다. . <br>$("#table7 tr:eq(1) td:nth-child(1)").html("value") <br>//두 번째 tr 값의 첫 번째 td인 table7을 가져옵니다. <br>$("#table7 tr:eq(1) td:nth-child(1)").html() <br>///8. 행 삽입: <br>//두 번째 tr 뒤에 행 삽입<br>$("<tr><td>insert 3</td><td>insert</td><td>insert</td><td>insert</ td> </tr>").insertAfter($("#table7 tr:eq(1)")); <br></script> <br><br> </tr> </table> </tr> </table> </tr> </div>