이 기사의 예에서는 매우 간단한 jquery 테이블 작업 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. jquery를 사용하여 지정된 테이블에 행을 추가하고 삭제합니다 코드 복사 코드는 다음과 같습니다. 1 2 3 11 22 33 테이블> td 너비="30%">1 2 3 테이블> //ID가 test인 테이블 끝에 줄을 추가합니다<br> function addtr(id){ tr_id = $("#test>tbody>tr:last").attr("id");<br> tr_id; //경고(tr_id);<br> str = "<tr id='" tr_id "'> <td width="30%">re1</td> <td width="30%">re2</td> <td width="30%"></td> $('#' id).append(str) } //id가 test인 테이블의 마지막 행을 삭제합니다<br> function deltr(id){ tr_id = $("#test>tbody>tr:last").attr("id") $('#' tr_id).remove();<br> }<br> <br> <br> jQuery는 테이블의 행과 열을 동적으로 추가하고 삭제합니다 <br> <div class="codetitle"> <span><a style="CURSOR: pointer" data="38957" class="copybut" id="copybut38957" onclick="doCopy('code38957')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code38957"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <br> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br> <스타일 유형="텍스트/css"> .cl1{ 배경색:#FFFFFF; } .cl2{ 배경색:#FFFF99; } </style><br> <script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"> <br> var rowCount = 0;<br> var colCount = 2; <br> 함수 addRow(){ rowCount ; var rowTemplate = '<tr class="tr_' rowCount '"><td>' rowCount '</td><td class="cl1">内容' rowCount '</td><td class="cl1"><a href="#" onclick=delRow(' rowCount ')>删除</a></td></tr>';<br> var tableHtml = $("#testTable tbody").html();<br> tableHtml = rowTemplate; $("#testTable tbody").html(tableHtml); }<br> function delRow(_id){ $("#testTable .tr_" _id).hide(); 행 개수--; } <br> 함수 addCol(){ colCount ; $("#testTable tr").each(function(){ <br> var trHtml = $(this).html(); trHtml = '<td onclick="delCol(' colCount ')">사용 가능한 td</td>';<br> $(this).html(trHtml);<br> }); <br> } <br> function delCol(_id){ $("#testTable tr").each(function(){ $("td:eq(" _id ")",this).hide(); });<br> colCount--;<br> } <br> function mover(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq(" _id ")",this).removeClass("cl1"); <br> $("td:eq(" _id ")",this).addClass("cl2"); }); } <br> function mout(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq(" _id ")",this).removeClass("cl2"); <br> $("td:eq(" _id ")",this).addClass("cl1"); }); } jquery操作表格测试 머리> 序号 内容 操작품 테이블> 본문> jquery操作表格(添加/删除行、添加/删除列) 复代码 代码如下: jquery操作表格测试 <br> function del(_id){ $("#testTable .tr_" _id).html('');<br> var tableTr = $("#testTable .tr_" _id).hide(); }<br> function addRow(){ var addRowTemplete = '<tr class="tr_' tableCount '"><br> <td class="cl1">' tableCount '</td><td class="cl1">内容' tableCount '</td><br> <td class="cl1"><a href="javascript:void(0)" onclick=del(' tableCount ');>删除</a></td></tr> '; $("#testTable tbody").append(addRowTemplete); } function addCol(){ $("#testTable tr").each(function(){ var trHtml = "<td onclick='delCol(" colCount ")'>曾加的td</td>"; $(this).append(trHtml) }); } function delCol(_id){ $("#testTable tr").each(function(){ $("td:eq(" _id ")",this).hide(); }); }<br> </스크립트> </머리><br> <br> <table width="487" border="1" id="testTable"> <tr> <td onclick="delCol(0)">序号</td> <td onclick="delCol(1)">内容</td> <td onclick="delCol(2)">操작품</td> </tr> </테이블> <p> <input type="button" name="Submit" value="添加行" onclick="addRow()" /> <input type="button" name="Submit2" value="添加列" onclick="addCol()"/> </p> </본문><br> </div> </tr> </div>