超级简单的jquery操作表格方法
本文实例讲述了超级简单的jquery操作表格方法。分享给大家供大家参考。具体实现方法如下：
利用jquery给指定的table添加一行、删除一行
<scriptlanguage="javascript"src="./jquery.js"></script>
<tableborder="1px#ooo"id="test"name="test"class="test"cellpadding="0"cellspacing="0"width="20%">
<trid="1"><tdwidth="30%">1</td>
<tdwidth="30%">2</td>
<tdwidth="30%">3</td></tr>
<trid="2"><tdwidth="30%">11</td>
<tdwidth="30%">22</td>
<tdwidth="30%">33</td></tr>
</table>
<tableborder="1px#ooo"id="test1"name="test1"cellpadding="0"cellspacing="0"width="20%"><trid="4"><tdwidth="30%">1</td>
<tdwidth="30%">2</td>
<tdwidth="30%">3</td>
</tr>
</table>
<inputtype="button"name="button"value="add"onclick="addtr('test');">
<inputtype="button"name="button"value="del"onclick="deltr('test');">
<script>//在id为test的table的最后增加一行
functionaddtr(id){tr_id=$("#test>tbody>tr:last").attr("id");
tr_id++;//alert(tr_id);
str="<trid='"+tr_id+"'><tdwidth='30%'>re1</td><tdwidth='30%'>re2</td><tdwidth='30%'>re3</td></tr>";
$('#'+id).append(str);}//删除id为test的table的最后一行
functiondeltr(id){tr_id=$("#test>tbody>tr:last").attr("id");$('#'+tr_id).remove();
}
</script>jQuery动态添加删除表格的行和列
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<styletype="text/css">.cl1{background-color:#FFFFFF;}.cl2{background-color:#FFFF99;}</style>
<scripttype="text/javascript"src="css_js/jquery/jquery-1.3.2.min.js"></script>
<scripttype="text/javascript">
varrowCount=0;
varcolCount=2;
functionaddRow(){rowCount++;varrowTemplate='<trclass="tr_'+rowCount+'"><td>'+rowCount+'</td><tdclass="cl1">内容'+rowCount+'</td><tdclass="cl1"><ahref="#"onclick=delRow('+rowCount+')>删除</a></td></tr>';
vartableHtml=$("#testTabletbody").html();
tableHtml+=rowTemplate;$("#testTabletbody").html(tableHtml);}
functiondelRow(_id){$("#testTable.tr_"+_id).hide();rowCount--;}
functionaddCol(){colCount++;$("#testTabletr").each(function(){
vartrHtml=$(this).html();trHtml+='<tdonclick="delCol('+colCount+')">增加的td</td>';
$(this).html(trHtml);
});
}
functiondelCol(_id){ $("#testTabletr").each(function(){$("td:eq("+_id+")",this).hide();});
colCount--;
}
functionmover(_id){$("#testTabletr:not(:first)").each(function(){$("td:eq("+_id+")",this).removeClass("cl1");
$("td:eq("+_id+")",this).addClass("cl2");});}
functionmout(_id){$("#testTabletr:not(:first)").each(function(){$("td:eq("+_id+")",this).removeClass("cl2");
$("td:eq("+_id+")",this).addClass("cl1");});}</script>
<title>jquery操作表格测试</title>
</head>
<body>
<tableid="testTable"border="1"width="500"><tr>
<td>序号</td><tdonmouseover="mover(1);"onmouseout="mout(1);">内容</td>
<tdonmouseover="mover(2);"onmouseout="mout(2);">操作</td></tr>
</table>
<inputtype="button"value="添加行"onclick="addRow();"/>
<inputtype="button"value="添加列"onclick="addCol();"/>
</body>
jquery操作表格(添加/删除行、添加/删除列)
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>
<scripttype="text/javascript"src="jquery-1.4.4.min.js"></script>
<title>jquery操作表格测试</title>
<scripttype="text/javascript">
functiondel(_id){$("#testTable.tr_"+_id).html('');
vartableTr=$("#testTable.tr_"+_id).hide();}
functionaddRow(){varaddRowTemplete='<trclass="tr_'+tableCount+'">
<tdclass="cl1">'+tableCount+'</td><tdclass="cl1">内容'+tableCount+'</td>
<tdclass="cl1"><ahref="javascript:void(0)"onclick=del('+tableCount+');>删除</a></td></tr>';$("#testTabletbody").append(addRowTemplete);}functionaddCol(){$("#testTabletr").each(function(){ vartrHtml="<tdonclick='delCol("+colCount+")'>曾加的td</td>"; $(this).append(trHtml);});}functiondelCol(_id){$("#testTabletr").each(function(){ $("td:eq("+_id+")",this).hide();});}
</script></head>
<body>
<tablewidth="487"border="1"id="testTable"><tr><tdonclick="delCol(0)">序号</td><tdonclick="delCol(1)">内容</td><tdonclick="delCol(2)">操作</td></tr></table><p><inputtype="button"name="Submit"value="添加行"onclick="addRow()"/><inputtype="button"name="Submit2"value="添加列"onclick="addCol()"/></p></body>
</html><!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>我的百分之一女装店官方网站|白菜园社区|4000-921001|就爱百分一</title>
<metaname="keywords"content="我的百分之一,我的百分之一女装店,我的百分之一商城,我的百分之一淘宝"/>
<metaname="description"content="我的百分之一淘宝三金冠女装店官方网站100f1.com,仅为百分一有品位的美女！我的百分之一商城每月发布新款时尚女装和潮流服饰女装搭配。"/>
<scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
</head>
<body>
<divid="wrap"class="wrap">
<divclass="fatie"id="fatie">
<dlclass="options">
<dd>选项<span>1</span>:<inputtype="text" class="text" /><aclass="base_icon"href="javascript:void(0);">删除</a></dd>
<dd>选项<span>2</span>:<inputtype="text" class="text" /><aclass="base_icon"href="javascript:void(0);">删除</a></dd>
<dd>选项<span>3</span>:<inputtype="text" class="text" /><aclass="base_icon"href="javascript:void(0);">删除</a></dd>
<dd>选项<span>4</span>:<inputtype="text" class="text" /><aclass="base_icon"href="javascript:void(0);">删除</a></dd>
<dd>选项<span>5</span>:<inputtype="text" class="text" /><aclass="base_icon"href="javascript:void(0);">删除</a></dd>
</dl>
<pclass="add_opt">
<spanclass="base_icon">添加更多选项</span>
</p>
</div>
</div>
</body>
<scripttype="text/javascript">
$(document).ready(function(){//投票选项增减控制
varfatie=$("#fatie");
varoption=fatie.find(".optionsdd");
functionlist_again(){//选项重新排序
option.each(function(){
vari=$(this).index();
$(this).find("span").html(i+1);
})
}
fatie.find(".add_optspan").click(function(){//增加选项
fatie.find(".options").append('<dd>选项<span>i</span>:<inputtype="text" class="text" /><aclass="base_icon"href="javascript:void(0);">删除</a></dd>');
option=fatie.find(".optionsdd");
list_again();
})
option.find("a").live("click",function(){//删除选项
$(this).parent().remove();
list_again();
})
})
</script>
</html>
希望本文所述对大家的jquery程序设计有所帮助。