>  기사  >  웹 프론트엔드  >  매우 간단한 jquery 테이블 작업 방법_jquery

매우 간단한 jquery 테이블 작업 방법_jquery

WBOY
WBOY원래의
2016-05-16 16:26:561361검색

이 기사의 예에서는 매우 간단한 jquery 테이블 작업 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

jquery를 사용하여 지정된 테이블에 행을 추가하고 삭제합니다

코드 복사 코드는 다음과 같습니다.









1 2 3
11 22 33
td 너비="30%">1






<script> //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"></script>

jquery操作表格测试


2 3






jquery操作表格(添加/删除行、添加/删除列)

复代码 代码如下:





jquery操作表格测试
序号 内容 操작품