超级简单的jquery操作表格方法

　　本文实例讲述了超级简单的jquery操作表格方法。分享给大家供大家参考。具体实现方法如下：

　　利用jquery给指定的table添加一行、删除一行

复制代码代码如下:

　　</table>

　　</tr>

　　</table>

　　<script> //在id为test的table的最后增加一行

　　function addtr(id){ tr_id = $("#test>tbody>tr:last").attr("id");

　　tr_id++; //alert(tr_id);

　　str = "<tr id = '"+tr_id+"'><td width='30%'>re1</td><td width='30%'>re2</td><td width='30%'>re3</td></tr>";

　　$('#'+id).append(str); } //删除id为test的table的最后一行

　　function deltr(id){ tr_id = $("#test>tbody>tr:last").attr("id"); $('#'+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">

　　<head>

　　<style type="text/css"> .cl1{ background-color:#FFFFFF; } .cl2{ background-color:#FFFF99; } </style>

　　var rowCount = 0;

　　var colCount = 2;

　　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>';

　　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 += '<td onclick="delCol('+colCount+')">增加的td</td>';

　　$(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>

　　</body>

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

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>jquery操作表格测试</title>

　　function del(_id){ $("#testTable .tr_"+_id).html('');

　　var tableTr = $("#testTable .tr_"+_id).hide(); }

　　function addRow(){ var addRowTemplete = '<tr class="tr_'+tableCount+'">

　　<td class="cl1">'+tableCount+'</td><td class="cl1">内容'+tableCount+'</td>

　　<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(); }); }

　　</script> </head>

　　<body>

　　</html>

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>我的百分之一女装店官方网站|白菜园社区|4000-921001|就爱百分一</title>

　　</head>

　　<body>

　　</dl>

　　<span class="base_icon">添加更多选项</span>

　　</p>

　　</div>

　　</body>

　　$(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('<dd>选项<span>i</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);">删除</a></dd>');

　　option = fatie.find(".options dd");

　　list_again();

　　})

　　option.find("a").live("click",function(){//删除选项

　　$(this).parent().remove();

　　list_again();

　　})

　　</script>

　　</html>

　　希望本文所述对大家的jquery程序设计有所帮助。

教程首页更多教程