超级简单的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程序设计有所帮助。