当前位置: 首页  >  JQuery  >  超级简单的jquery操作表格(添加/删除行、添加/删除列)

超级简单的jquery操作表格(添加/删除行、添加/删除列) TOP

 
  1. 利用jquery给指定的table添加一行、删除一行   
  2.   
  3. <script language="javascript" src="./jquery.js"></script>   
  4.   
  5. <table border="1px #ooo" id="test" name="test" class="test" cellpadding="0" cellspacing="0" width="20%">   
  6.   
  7. <tr id="1"><td width="30%">1</td>   
  8.   
  9. <td width="30%">2</td>   
  10.   
  11. <td width="30%">3</td></tr>   
  12.   
  13. <tr id="2"><td width="30%">11</td>   
  14.   
  15. <td width="30%">22</td>   
  16.   
  17. <td width="30%">33</td></tr>   
  18.   
  19. </table>   
  20.   
  21. <table border="1px #ooo" id="test1" name="test1" cellpadding="0" cellspacing="0" width="20%"> <tr id="4"><td width="30%">1</td>   
  22.   
  23. <td width="30%">2</td>   
  24.   
  25. <td width="30%">3</td>   
  26.   
  27. </tr>   
  28.   
  29. </table>   
  30.   
  31. <input type="button" name="button" value="add" onclick="addtr(''test'');">   
  32.   
  33. <input type="button" name="button" value="del" onclick="deltr(''test'');">   
  34.   
  35. <script> //在id为test的table的最后增加一行   
  36.   
  37. function addtr(id){ tr_id = $("#test>tbody>tr:last").attr("id");   
  38.   
  39. tr_id++; //alert(tr_id);   
  40.   
  41. str = "<tr id = ''"+tr_id+"''><td width=''30%''>re1</td><td width=''30%''>re2</td><td width=''30%''>re3</td></tr>";   
  42.   
  43. $(''#''+id).append(str); } //删除id为test的table的最后一行   
  44.   
  45. function deltr(id){ tr_id = $("#test>tbody>tr:last").attr("id"); $(''#''+tr_id).remove();   
  46.   
  47. }   
  48.   
  49. </script>   
  50.   
  51.     
  52.        
  53. jQuery动态添加删除表格的行和列    
  54.   
  55. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  56.   
  57. <html xmlns="http://www.w3.org/1999/xhtml">   
  58.   
  59. <head>   
  60.   
  61. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
  62.   
  63. <style type="text/css"> .cl1{ background-color:#FFFFFF; } .cl2{ background-color:#FFFF99; } </style>   
  64.   
  65. <script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script>   
  66.   
  67. <script type="text/javascript">   
  68.   
  69. var rowCount = 0;   
  70.   
  71. var colCount = 2;     
  72.   
  73. function 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>'';   
  74.   
  75. var tableHtml = $("#testTable tbody").html();   
  76.   
  77. tableHtml += rowTemplate; $("#testTable tbody").html(tableHtml); }   
  78.   
  79.   function delRow(_id){ $("#testTable .tr_"+_id).hide(); rowCount--; }     
  80.   
  81. function addCol(){ colCount++; $("#testTable tr").each(function(){     
  82.   
  83. var trHtml = $(this).html(); trHtml += ''<td onclick="delCol(''+colCount+'')">增加的td</td>'';   
  84.   
  85. $(this).html(trHtml);   
  86.   
  87. });     
  88.   
  89. }     
  90.   
  91. function delCol(_id){   $("#testTable tr").each(function(){ $("td:eq("+_id+")",this).hide(); });   
  92.   
  93. colCount--;   
  94.   
  95. }     
  96.   
  97. function mover(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq("+_id+")",this).removeClass("cl1");   
  98.   
  99. $("td:eq("+_id+")",this).addClass("cl2"); }); }     
  100.   
  101. function mout(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq("+_id+")",this).removeClass("cl2");   
  102.   
  103. $("td:eq("+_id+")",this).addClass("cl1"); }); } </script> <title>jquery操作表格测试</title>   
  104.   
  105. </head>   
  106.   
  107. <body>   
  108.   
  109. <table id="testTable" border="1" width="500"> <tr>   
  110.   
  111. <td>序号</td> <td onmouseover="mover(1);" onmouseout="mout(1);">内容</td>   
  112.   
  113. <td onmouseover="mover(2);" onmouseout="mout(2);">操作</td> </tr>   
  114.   
  115. </table>   
  116.   
  117. <input type="button" value="添加行" onclick="addRow();"/>   
  118.   
  119. <input type="button" value="添加列" onclick="addCol();"/>   
  120.   
  121. </body>   
  122.   
  123.   jquery操作表格(添加/删除行、添加/删除列) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  124.   
  125. <html xmlns="http://www.w3.org/1999/xhtml">   
  126.   
  127. <head>   
  128.   
  129. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />   
  130.   
  131. <script type="text/javascript" src="jquery-1.4.4.min.js"></script>   
  132.   
  133. <title>jquery操作表格测试</title>   
  134.   
  135. <script type="text/javascript">   
  136.   
  137. function del(_id){ $("#testTable .tr_"+_id).html('''');   
  138.   
  139. var tableTr = $("#testTable .tr_"+_id).hide(); }   
  140.   
  141. function addRow(){ var addRowTemplete = ''<tr class="tr_''+tableCount+''">   
  142.   
  143. <td class="cl1">''+tableCount+''</td><td class="cl1">内容''+tableCount+''</td>   
  144.   
  145. <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(); }); }   
  146.   
  147. </script> </head>   
  148.   
  149. <body>   
  150.   
  151. <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>   
  152.   
  153. </html>   
  154.   
  155.     
  156.   
  157. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  158.   
  159. <html xmlns="http://www.w3.org/1999/xhtml">   
  160.   
  161. <head>   
  162.   
  163. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  164.   
  165. <title>我的百分之一女装店官方网站|白菜园社区|4000-921001|就爱百分一</title>   
  166.   
  167. <meta name="keywords" content="我的百分之一,我的百分之一女装店,我的百分之一商城,我的百分之一淘宝" />   
  168.   
  169. <meta name="description" content="我的百分之一淘宝三金冠女装店官方网站100f1.com,仅为百分一有品位的美女!我的百分之一商城每月发布新款时尚女装和潮流服饰女装搭配。" />   
  170.   
  171. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>   
  172.   
  173. </head>   
  174.   
  175. <body>   
  176.   
  177. <div id="wrap" class="wrap">   
  178.   
  179. <div class="fatie" id="fatie">   
  180.   
  181. <dl class="options">   
  182.   
  183. <dd>选项<span>1</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>   
  184.   
  185. <dd>选项<span>2</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>   
  186.   
  187. <dd>选项<span>3</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>   
  188.   
  189. <dd>选项<span>4</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>   
  190.   
  191. <dd>选项<span>5</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>   
  192.   
  193. </dl>   
  194.   
  195. <p class="add_opt">   
  196.   
  197. <span class="base_icon">添加更多选项</span>   
  198.   
  199. </p>   
  200.   
  201. </div>   
  202.   
  203. </div>   
  204.   
  205. </body>   
  206.   
  207. <script type="text/javascript">   
  208.   
  209. $(document).ready(function(){//投票选项增减控制   
  210.   
  211. var fatie = $("#fatie");   
  212.   
  213. var option = fatie.find(".options dd");   
  214.   
  215. function list_again(){//选项重新排序   
  216.   
  217. option.each(function(){   
  218.   
  219. var i = $(this).index();   
  220.   
  221. $(this).find("span").html(i+1);   
  222.   
  223. })   
  224.   
  225. }   
  226.   
  227. fatie.find(".add_opt span").click(function(){//增加选项   
  228.   
  229. fatie.find(".options").append(''<dd>选项<span>i</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);">删除</a></dd>'');   
  230.   
  231. option = fatie.find(".options dd");   
  232.   
  233. list_again();   
  234.   
  235. })   
  236.   
  237. option.find("a").live("click",function(){//删除选项   
  238.   
  239. $(this).parent().remove();   
  240.   
  241. list_again();   
  242.   
  243. })   
  244.   
  245. })   
  246.   
  247. </script>   
  248.   
  249. </html>   

 

Views:1590   Posted at:2013-11-19
收藏 推荐 打印 | 录入:Admin | 阅读:0