집 > 기사 > 웹 프론트엔드 > Jquery를 효율적으로 사용하여 테이블 작업

Jquery를 효율적으로 사용하여 테이블 작업

php中世界最好的语言원래의: 2018-04-24 09:55:46940검색

이번에는 JQuery를 사용하여 테이블을 효율적으로 운용하는 방법을 알려드리겠습니다. JQuery를 사용하여 테이블을 효율적으로 운용하기 위한 주의사항은 무엇인지 살펴보겠습니다.

jquery를 사용하여 지정된 테이블에 행 추가 및 삭제

<script language="
javascript
" src="./jquery.js"></script>
<table border="1px #ooo" id="test" name="test" class="test" cellpadding="0" cellspacing="0" width="20%">
<tr id="1"><td width="30%">1</td>
<td width="30%">2</td>
<td width="30%">3</td></tr>
<tr id="2"><td width="30%">11</td>
<td width="30%">22</td>
<td width="30%">33</td></tr>
</table>
<table border="1px #ooo" id="test1" name="test1" cellpadding="0" cellspacing="0" width="20%"> <tr id="4"><td width="30%">1</td>
<td width="30%">2</td>
<td width="30%">3</td>
</tr>
</table>
<input type="button" name="button" value="add" onclick="addtr(&#39;test&#39;);">
<input type="button" name="button" value="del" onclick="deltr(&#39;test&#39;);">
<script> //在id为test的table的最后增加一行
function addtr(id){ tr_id = $("#test>tbody>tr:last").attr("id");
tr_id++; //alert(tr_id);
str = "<tr id = &#39;"+tr_id+"&#39;><td width=&#39;30%&#39;>re1</td><td width=&#39;30%&#39;>re2</td><td width=&#39;30%&#39;>re3</td></tr>";
$(&#39;#&#39;+id).append(str); } //删除id为test的table的最后一行
function deltr(id){ tr_id = $("#test>tbody>tr:last").attr("id"); $(&#39;#&#39;+tr_id).remove();
}
</script>

jQuery에서 테이블의 행과 열을 동적으로 추가 및 삭제

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css"> .cl1{ 
background-color
:#FFFFFF; } .cl2{ background-color:#FFFF99; } </style>
<script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
var rowCount = 0;
var colCount = 2;  
function addRow(){ rowCount++; var rowTemplate = &#39;<tr class="tr_&#39;+rowCount+&#39;"><td>&#39;+rowCount+&#39;</td><td class="cl1">内容&#39;+rowCount+&#39;</td><td class="cl1"><a href="#" onclick=delRow(&#39;+rowCount+&#39;)>删除</a></td></tr>&#39;;
var tableHtml = $("#testTable tbody").html();
tableHtml += rowTemplate; $("#testTable tbody").html(tableHtml); }
  function delRow(_id){ $("#testTable .tr_"+_id).hide(); rowCount--; }  
function addCol(){ colCount++; $("#testTable tr").each(function(){  
var trHtml = $(this).html(); trHtml += &#39;<td onclick="delCol(&#39;+colCount+&#39;)">增加的td</td>&#39;;
$(this).html(trHtml);
});  
}  
function delCol(_id){   $("#testTable tr").each(function(){ $("td:eq("+_id+")",this).hide(); });
colCount--;
}  
function mover(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq("+_id+")",this).removeClass("cl1");
$("td:eq("+_id+")",this).addClass("cl2"); }); }  
function mout(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq("+_id+")",this).removeClass("cl2");
$("td:eq("+_id+")",this).addClass("cl1"); }); } </script>
<title>jquery操作表格测试</title>
</head>
<body>
<table id="testTable" border="1" width="500"> <tr>
<td>序号</td> <td 
onmouseover
="mover(1);" onmouseout="mout(1);">内容</td>
<td onmouseover="mover(2);" onmouseout="mout(2);">操作</td> </tr>
</table>
<input type="button" value="添加行" onclick="addRow();"/>
<input type="button" value="添加列" onclick="addCol();"/>
</body>

jquery를 사용하여 테이블 조작(행 추가/삭제, 열 추가/삭제)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<title>jquery操作表格测试</title>
<script type="text/javascript">
function del(_id){ $("#testTable .tr_"+_id).html(&#39;&#39;);
var tableTr = $("#testTable .tr_"+_id).hide(); }
function addRow(){ var addRowTemplete = &#39;<tr class="tr_&#39;+tableCount+&#39;">
<td class="cl1">&#39;+tableCount+&#39;</td><td class="cl1">内容&#39;+tableCount+&#39;</td>
<td class="cl1"><a href="javascript:void(0)" onclick=del(&#39;+tableCount+&#39;);>删除</a></td></tr>&#39;; $("#testTable tbody").append(addRowTemplete); } function addCol(){ $("#testTable tr").each(function(){    var trHtml = "<td onclick=&#39;delCol("+colCount+")&#39;>曾加的td</td>";    $(this).append(trHtml); }); } function delCol(_id){ $("#testTable tr").each(function(){    $("td:eq("+_id+")",this).hide(); }); }
</script> </head>
<body>
<table width="487" border="1" id="testTable"> <tr> <td onclick="delCol(0)">序号</td> <td onclick="delCol(1)">内容</td> <td onclick="delCol(2)">操作</td> </tr> </table> <p> <input type="button" name="Submit" value="添加行" onclick="addRow()" /> <input type="button" name="Submit2" value="添加列" onclick="addCol()"/> </p> </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我的百分之一女装店官方网站|白菜园社区|4000-921001|就爱百分一</title>
<meta name="keywords" content="我的百分之一,我的百分之一女装店,我的百分之一商城,我的百分之一淘宝" />
<meta name="description" content="我的百分之一淘宝三金冠女装店官方网站100f1.com,仅为百分一有品位的美女！我的百分之一商城每月发布新款时尚女装和潮流服饰女装搭配。" />
<script type="text/javascript" src="
https://
ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
</head>
<body>
<p id="wrap" class="wrap">
<p class="fatie" id="fatie">
<dl class="options">
<dd>选项<span>1</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>
<dd>选项<span>2</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>
<dd>选项<span>3</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>
<dd>选项<span>4</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>
<dd>选项<span>5</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>
</dl>
<p class="add_opt">
<span class="base_icon">添加更多选项</span>
</p>
</p>
</p>
</body>
<script type="text/javascript">
$(document).ready(function(){//投票选项增减控制
var fatie = $("#fatie");
var option = fatie.find(".options dd");
function list_again(){//选项重新排序
option.each(function(){
var i = $(this).index();
$(this).find("span").html(i+1);
})
}
fatie.find(".add_opt span").click(function(){//增加选项
fatie.find(".options").append(&#39;<dd>选项<span>i</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>&#39;);
option = fatie.find(".options dd");
list_again();
})
option.find("a").live("click",function(){//删除选项
$(this).parent().remove();
list_again();
})
})
</script>
</html>

이 기사의 사례를 읽으셨을 것입니다. 더 흥미로운 정보를 얻으려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!