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

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

利用jquery给指定的table添加一行、删除一行
复制代码 代码如下:lt;script language="javascript" src="./jquery.js"gt;lt;/scriptgt;
lt;table border="1px #ooo" id="test" name="test" class="test" cellpadding="0" cellspacing="0" width="20%"gt;
lt;tr id="1"gt;lt;td width="30%"gt;1lt;/tdgt;
lt;td width="30%"gt;2lt;/tdgt;
lt;td width="30%"gt;3lt;/tdgt;lt;/trgt;
lt;tr id="2"gt;lt;td width="30%"gt;11lt;/tdgt;
lt;td width="30%"gt;22lt;/tdgt;
lt;td width="30%"gt;33lt;/tdgt;lt;/trgt;
lt;/tablegt;
lt;table border="1px #ooo" id="test1" name="test1" cellpadding="0" cellspacing="0" width="20%"gt; lt;tr id="4"gt;lt;td width="30%"gt;1lt;/tdgt;
lt;td width="30%"gt;2lt;/tdgt;
lt;td width="30%"gt;3lt;/tdgt;
lt;/trgt;
lt;/tablegt;
lt;input type="button" name="button" value="add" onclick="addtr('test');"gt;
lt;input type="button" name="button" value="del" onclick="deltr('test');"gt;
lt;scriptgt; //在id为test的table的最后增加一行
function addtr(id){ tr_id = $("#testgt;tbodygt;tr:last").attr("id");
tr_id++; //alert(tr_id);
str = "lt;tr id = '"+tr_id+"'gt;lt;td width='30%'gt;re1lt;/tdgt;lt;td width='30%'gt;re2lt;/tdgt;lt;td width='30%'gt;re3lt;/tdgt;lt;/trgt;";
$('#'+id).append(str); } //删除id为test的table的最后一行
function deltr(id){ tr_id = $("#testgt;tbodygt;tr:last").attr("id"); $('#'+tr_id).remove();
}
lt;/scriptgt;
nbsp;
jQuery动态添加删除表格的行和列
复制代码 代码如下:lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"gt;
lt;html xmlns="http://www.w3.org/1999/xhtml"gt;
lt;headgt;
lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /gt;
lt;style type="text/css"gt; .cl1{ background-color:#FFFFFF; } .cl2{ background-color:#FFFF99; } lt;/stylegt;
lt;script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"gt;lt;/scriptgt;
lt;script type="text/javascript"gt;
var rowCount = 0;
var colCount = 2;nbsp;
function addRow(){ rowCount++; var rowTemplate = 'lt;tr class="tr_'+rowCount+'"gt;lt;tdgt;'+rowCount+'lt;/tdgt;lt;td class="cl1"gt;内容'+rowCount+'lt;/tdgt;lt;td class="cl1"gt;lt;a href="#" onclick=delRow('+rowCount+')gt;删除lt;/agt;lt;/tdgt;lt;/trgt;';
var tableHtml = $("#testTable tbody").html();
tableHtml += rowTemplate; $("#testTable tbody").html(tableHtml); }
nbsp; function delRow(_id){ $("#testTable .tr_"+_id).hide(); rowCount--; }nbsp;
function addCol(){ colCount++; $("#testTable tr").each(function(){nbsp;
var trHtml = $(this).html(); trHtml += 'lt;td onclick="delCol('+colCount+')"gt;增加的tdlt;/tdgt;';
$(this).html(trHtml);
});nbsp;
}nbsp;
function delCol(_id){nbsp;nbsp; $("#testTable tr").each(function(){ $("td:eq("+_id+")",this).hide(); });
colCount--;
}nbsp;
function mover(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq("+_id+")",this).removeClass("cl1");
$("td:eq("+_id+")",this).addClass("cl2"); }); }nbsp;
function mout(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq("+_id+")",this).removeClass("cl2");
$("td:eq("+_id+")",this).addClass("cl1"); }); } lt;/scriptgt;
lt;titlegt;jquery操作表格测试lt;/titlegt;
lt;/headgt;
lt;bodygt;
lt;table id="testTable" border="1" width="500"gt; lt;trgt;
lt;tdgt;序号lt;/tdgt; lt;td onmouseover="mover(1);" onmouseout="mout(1);"gt;内容lt;/tdgt;
lt;td onmouseover="mover(2);" onmouseout="mout(2);"gt;操作lt;/tdgt; lt;/trgt;
lt;/tablegt;
lt;input type="button" value="添加行" onclick="addRow();"/gt;
lt;input type="button" value="添加列" onclick="addCol();"/gt;
lt;/bodygt;

jquery操作表格(添加/删除行、添加/删除列)
复制代码 代码如下:lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"gt;
lt;html xmlns="http://www.w3.org/1999/xhtml"gt;
lt;headgt;
lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /gt;
lt;script type="text/javascript" src="jquery-1.4.4.min.js"gt;lt;/scriptgt;
lt;titlegt;jquery操作表格测试lt;/titlegt;
lt;script type="text/javascript"gt;
function del(_id){ $("#testTable .tr_"+_id).html('');
var tableTr = $("#testTable .tr_"+_id).hide(); }
function addRow(){ var addRowTemplete = 'lt;tr class="tr_'+tableCount+'"gt;
lt;td class="cl1"gt;'+tableCount+'lt;/tdgt;lt;td class="cl1"gt;内容'+tableCount+'lt;/tdgt;
lt;td class="cl1"gt;lt;a href="javascript:void(0)" onclick=del('+tableCount+');gt;删除lt;/agt;lt;/tdgt;lt;/trgt;'; $("#testTable tbody").append(addRowTemplete); } function addCol(){ $("#testTable tr").each(function(){nbsp;nbsp;nbsp; var trHtml = "lt;td onclick='delCol("+colCount+")'gt;曾加的tdlt;/tdgt;";nbsp;nbsp;nbsp; $(this).append(trHtml); }); } function delCol(_id){ $("#testTable tr").each(function(){nbsp;nbsp;nbsp; $("td:eq("+_id+")",this).hide(); }); }
lt;/scriptgt; lt;/headgt;
lt;bodygt;
lt;table width="487" border="1" id="testTable"gt; lt;trgt; lt;td onclick="delCol(0)"gt;序号lt;/tdgt; lt;td onclick="delCol(1)"gt;内容lt;/tdgt; lt;td onclick="delCol(2)"gt;操作lt;/tdgt; lt;/trgt; lt;/tablegt; lt;pgt; lt;input type="button" name="Submit" value="添加行" onclick="addRow()" /gt; lt;input type="button" name="Submit2" value="添加列" onclick="addCol()"/gt; lt;/pgt; lt;/bodygt;
lt;/htmlgt;
复制代码 代码如下:lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"gt;
lt;html xmlns="http://www.w3.org/1999/xhtml"gt;
lt;headgt;
lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /gt;
lt;titlegt;我的百分之一女装店官方网站|白菜园社区|4000-921001|就爱百分一lt;/titlegt;
lt;meta name="keywords" content="我的百分之一,我的百分之一女装店,我的百分之一商城,我的百分之一淘宝" /gt;
lt;meta name="description" content="我的百分之一淘宝三金冠女装店官方网站100f1.com,仅为百分一有品位的美女！我的百分之一商城每月发布新款时尚女装和潮流服饰女装搭配。" /gt;
lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"gt;lt;/scriptgt;
lt;/headgt;
lt;bodygt;
lt;div id="wrap" class="wrap"gt;
lt;div class="fatie" id="fatie"gt;
lt;dl class="options"gt;
lt;ddgt;选项lt;spangt;1lt;/spangt;:lt;input type="text"nbsp; class="text"nbsp; /gt;lt;a class="base_icon" href="javascript:void(0);"gt;删除lt;/agt;lt;/ddgt;
lt;ddgt;选项lt;spangt;2lt;/spangt;:lt;input type="text"nbsp; class="text"nbsp; /gt;lt;a class="base_icon" href="javascript:void(0);"gt;删除lt;/agt;lt;/ddgt;
lt;ddgt;选项lt;spangt;3lt;/spangt;:lt;input type="text"nbsp; class="text"nbsp; /gt;lt;a class="base_icon" href="javascript:void(0);"gt;删除lt;/agt;lt;/ddgt;
lt;ddgt;选项lt;spangt;4lt;/spangt;:lt;input type="text"nbsp; class="text"nbsp; /gt;lt;a class="base_icon" href="javascript:void(0);"gt;删除lt;/agt;lt;/ddgt;
lt;ddgt;选项lt;spangt;5lt;/spangt;:lt;input type="text"nbsp; class="text"nbsp; /gt;lt;a class="base_icon" href="javascript:void(0);"gt;删除lt;/agt;lt;/ddgt;
lt;/dlgt;
lt;p class="add_opt"gt;
lt;span class="base_icon"gt;添加更多选项lt;/spangt;
lt;/pgt;
lt;/divgt;
lt;/divgt;
lt;/bodygt;
lt;script type="text/javascript"gt;
$(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('lt;ddgt;选项lt;spangt;ilt;/spangt;:lt;input type="text"nbsp; class="text"nbsp; /gt;lt;a class="base_icon" href="javascript:void(0);"gt;删除lt;/agt;lt;/ddgt;');
option = fatie.find(".options dd");
list_again();
})
option.find("a").live("click",function(){//删除选项
$(this).parent().remove();
list_again();
})
})
lt;/scriptgt;
lt;/htmlgt;

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

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!