动态添加一行
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js动态增加，删除table</title> <link rel="stylesheet" type="text/css" href="css/main.css"> <!--表单验证样式表--> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> //增加 function inserttable() { var newnode = $('#yltable')[0].cloneNode(true); var content = newnode.innerHTML; content = content.replace(/\[0\]/g, "["+ $('#div_bjbr')[0].childNodes.length + "]"); content = "<table id='yltable'>" + content + "</table>"; if($('#div_bjbr')[0].childNodes.length <=6){ $('#div_bjbr')[0].innerHTML=$('#div_bjbr')[0].innerHTML+content; }else{ alert("最多同时添加5个信息!"); } } //删除 function deletetable() { var parent = $('#div_bjbr')[0]; if (parent.childNodes.length > 1) { parent.removeChild(parent.lastChild); } } </script> </head> <body> <div class="center_division"> <div class="center_body_menu"> <form action="ReportAction_saveReport" id="form1" name="form1" method="post" namespace="/" enctype="multipart/form-data"> <table id="tb"> <tr> <td colspan="6" align="left" style="padding-left:10px; background-color:#DDDFE1;">被人基本信息</td> </tr> <tr> <td colspan="6" align="center"> <div id="div_bjbr"> <table id="yltable"> <TBODY id=yl1> <tr> <td width="130" bgcolor="#eef0f7">主体类别<font color="#FF0000">*</font></td> <td><select style="width:153px" id="beiJuBaoMainSort" name="reportedPersons[0].beiJuBaoMainSort"> <option selected="selected" value="">--请选择--</option> <option value="个人">个人</option> <option value="单位">单位</option> </select></td> <td width="130"><div id="beiJuBaoMainSortTip"></div></td> <td width="130" bgcolor="#eef0f7">名称<font color="#FF0000">*</font></td> <td><input type="text" name="reportedPersons[0].beiJuBaoName" id="beiJuBaoName" /> </td> <td width="130"><div id="beiJuBaoNameTip"></div> </td> </tr> </TBODY> <TBODY id=yl2> <tr> <td width="130" bgcolor="#eef0f7">性别</td> <td><select style="width:153px" id="beiJuBaoSex" name="reportedPersons[0].beiJuBaoSex"> <option selected="selected" value="">--请选择--</option> <option value="男">男</option> <option value="女">女</option> </select></td> <td width="130"><div id="beiJuBaoSexTip"></div></td> <td width="130" bgcolor="#eef0f7">身份</td> <td><select style="width:153px" id="beiJuBaoSpecialIdentity" name="reportedPersons[0].beiJuBaoSpecialIdentity"> <option selected="selected" value="">--请选择--</option> <option value="全国人大代表">全国人大代表</option> <option value="省市区人大代表">省市区人大代表</option> <option value="市地州盟人大代表">市地州盟人大代表</option> <option value="县市区人大代表">县市区人大代表</option> <option value="全国政协委员">全国政协委员</option> <option value="省市区政协委员">省市区政协委员</option> <option value="市地州盟政协委员">市地州盟政协委员</option> <option value="县市区政协委员">县市区政协委员</option> <option value="民主人士">民主人士</option> <option value="知名人士">知名人士</option> <option value="其他">其他</option> </select></td> <td width="130"><div id="beiJuBaoSpecialIdentityTip"></div></td> </tr> </TBODY> <TBODY id=yl3> <tr> <td width="130" bgcolor="#eef0f7">住址</td> <td><input type="text" name="reportedPersons[0].beiJuBaoAddress" id="beiJuBaoAddress" /> </td> <td><div id="beiJuBaoAddressTip"></div></td> <td width="130" bgcolor="#eef0f7">联系电话</td> <td><input type="text" name="reportedPersons[0].beiJuBaoPhone" id="beiJuBaoPhone" /> </td> <td width="130"><div id="beiJuBaoPhoneTip"></div></td> </tr> <tr> <td width="130" bgcolor="#eef0f7">单位名称</td> <td><input type="text" name="reportedPersons[0].beiJuBaoCompanyName" id="beiJuBaoCompanyName" /> </td> <td width="130"><div id="beiJuBaoCompanyNameTip"></div></td> <td width="130" bgcolor="#eef0f7">职务</td> <td><input type="text" name="reportedPersons[0].beiJuBaoPost" id="beiJuBaoPost" /> </td> <td width="130"><div id="beiJuBaoPostTip"></div></td> </tr> </TBODY> <TBODY id=yl4> <tr> <td width="130" bgcolor="#eef0f7">单位地址</td> <td><input type="text" name="reportedPersons[0].beiJuBaoCompanyAddress" id=beiJuBaoCompanyAddress /> </td> <td width="130"><div id="beiJuBaoCompanyAddressTip"></div></td> <td width="130" bgcolor="#eef0f7">所在地区</td> <td><select style="width:153px" id="beiJuBaoArea" name="reportedPersons[0].beiJuBaoArea"> <option selected="selected" value="">--请选择--</option> <option value="北京市">北京市</option> <option value="天津市">天津市</option> <option value="河北省">河北省</option> <option value="山西省">山西省</option> <option value="内蒙古自治区">内蒙古自治区</option> <option value="辽宁省">辽宁省</option> <option value="吉林省">吉林省</option> <option value="黑龙江省">黑龙江省</option> <option value="上海市">上海市</option> <option value="江苏省">江苏省</option> <option value="浙江省">浙江省</option> <option value="安徽省">安徽省</option> <option value="福建省">福建省</option> <option value="江西省">江西省</option> <option value="山东省">山东省</option> <option value="河南省">河南省</option> <option value="湖北省">湖北省</option> <option value="湖南省">湖南省</option> <option value="广东省">广东省</option> <option value="广西壮族自治区">广西壮族自治区</option> <option value="海南省">海南省</option> <option value="重庆市">重庆市</option> <option value="四川省">四川省</option> <option value="贵州省">贵州省</option> <option value="云南省">云南省</option> <option value="西藏自治区">西藏自治区</option> <option value="陕西省">陕西省</option> <option value="甘肃省">甘肃省</option> <option value="青海省">青海省</option> <option value="宁夏回族自治区">宁夏回族自治区</option> <option value="新疆维吾尔自治区">新疆维吾尔自治区</option> <option value="深圳市">深圳市</option> <option value="大连市">大连市</option> <option value="宁波市">宁波市</option> <option value="厦门市">厦门市</option> <option value="青岛市">青岛市</option> <option value="台湾">台湾</option> <option value="香港">香港</option> <option value="澳门">澳门</option> <option value="其他">其他</option> </select></td> <td width="130"><div id="beiJuBaoAreaTip"></div></td> </tr> </TBODY> <TBODY id=yl5> <tr> <td width="130" bgcolor="#eef0f7">注册地址</td> <td><input type="text" name="reportedPersons[0].beiJuBaoRegisteredAddress" id="beiJuBaoRegisteredAddress" /> </td> <td width="130"><div id="beiJuBaoRegisteredAddressTip"></div></td> <td width="130" bgcolor="#eef0f7">办公地址</td> <td><input type="text" name="reportedPersons[0].beiJuBaoOfficeAddress" id="beiJuBaoOfficeAddress" /> </td> <td width="130"><div id="beiJuBaoOfficeAddressTip"></div></td> </tr> <tr> <td width="130" bgcolor="#eef0f7">法人代表</td> <td><input type="text" name="reportedPersons[0].beiJuBaoLegalPerson" id="beiJuBaoLegalPerson" /> </td> <td width="130"><div id="beiJuBaoLegalPersonTip"></div></td> <td width="130" bgcolor="#eef0f7"></td> <td></td> <td width="130"><div></div></td> </tr> </TBODY> </table> </div> </td> </tr> <tr> <td colspan="6"><input type="button" name="button" value="新 增" style="width:60px; height:24px;" onclick="inserttable()" /> <input type="button" name="button" value="删 除" style="width:60px; height:24px;" onclick="deletetable()" /></td> </tr> </table> </form> </div> </div> </body> </html>
<extend name='Public:main' /> <block name='body'> <script type="text/javascript"> //增加 function inserttable() { var newnode = $('#yltable')[0].cloneNode(true); var content = newnode.innerHTML; content = content.replace(/\[0\]/g, $('#div_bjbr')[0].childNodes.length ); content = "<tr id='yltable' class='table_title'>" + content + "</tr>"; $('#div_bjbr')[0].innerHTML=$('#div_bjbr')[0].innerHTML+content; //if($('#div_bjbr')[0].childNodes.length <=6){ //$('#div_bjbr')[0].innerHTML=$('#div_bjbr')[0].innerHTML+content; //}else{ //alert("最多同时添加5个信息!"); //} } //删除 function deletetable() { var parent = $('#div_bjbr')[0]; if (parent.childNodes.length > 1) { parent.removeChild(parent.lastChild); } } </script> <gt name="info.id" value="0"> <form action="{:U('/Admin/Keydata/edit')}" method="post" name="form" id="myform"> <input type="hidden" name="id" value="{$info.id}"> <else /> <form action="{:U('/Admin/Keydata/add')}" method="post" name="form" id="myform"> </gt> <table width="98%" border="0" cellpadding="12" cellspacing="1" class="table" id="div_bjbr"> <tr class="table_title"> <td colspan="12" style="color:red;font-size: 16px;">选择账户->选择项目->选择端口->选择平台->选择区域->选择类别</td> </tr> <tr class="table_title"> <th style="color:red;font-size: 16px;">端口</td> <th style="color:red;font-size: 16px;">区域</td> <th style="color:red;font-size: 16px;">类别</td> <th style="color:red;font-size: 16px;">投放费用</td> <th style="color:red;font-size: 16px;">实际消费</td> <th style="color:red;font-size: 16px;">展现量</td> <th style="color:red;font-size: 16px;">点击量</td> <th style="color:red;font-size: 16px;">咨询量</td> <th style="color:red;font-size: 16px;">有效咨询量</td> <th style="color:red;font-size: 16px;">留电话量</td> <th style="color:red;font-size: 16px;">留QQ量</td> <th style="color:red;font-size: 16px;">到诊量</td> </tr> <tr class="table_title" id="yltable"> <td> <select style="width:91px" name="data[0].duankou"> <option selected="selected" value="">--请选择--</option> </select> </td> <td> <select style="width:91px" name="data[0].quyu"> <option selected="selected" value="">--请选择--</option> </select> </td> <td> <select style="width:91px" name="data[0].leibie"> <option selected="selected" value="">--请选择--</option> </select> </td> <td><input type="text" name="data[0].toufangfeiyong" style="width:50px" /></td> <td><input type="text" name="data[0].shijixiaofei" style="width:50px" /></td> <td><input type="text" name="data[0].zhanxianliang" style="width:50px" /></td> <td><input type="text" name="data[0].dianjiliang" style="width:50px" /></td> <td><input type="text" name="data[0].zixunliang" style="width:50px" /></td> <td><input type="text" name="data[0].youxiaozixunliang" style="width:50px" /></td> <td><input type="text" name="data[0].liudianhualiang" style="width:50px" /></td> <td><input type="text" name="data[0].liuqqliang" style="width:50px" /></td> <td><input type="text" name="data[0].daozhenliang" style="width:50px" /></td> </tr> </table> <table width="98%" border="0" cellpadding="12" cellspacing="1" class="table" > <tr class="table_title"> <td colspan="12"><input type="button" name="button" value="新 增" style="width:60px; height:24px;" onclick="inserttable()" /> <input type="button" name="button" value="删 除" style="width:60px; height:24px;" onclick="deletetable()" /></td> </tr> </table> </form> </block>
posted on 2016-04-05 11:56 HOT SUMMER 阅读(525) 评论(0) 编辑 收藏 举报
