js动态增加，删除td，tr，table，div

川长思鸟来 2024-02-17 14:15 44阅读 0赞

js实现的动态添加，删除table内容：

截图如下：

![SouthEast][]

![SouthEast 1][]

源代码：

main.css

body {
    	background-image: url(../images/qiantai/bg.png);
    	font-family: arial;
    	font-size: 12px;
    	color: #d4d7da;
    	text-align: center;
    	background-repeat: repeat-x;
    }
    
    .head {
    	margin: 0px auto 0 auto;
    	line-height: 15px;
    }
    
    .left {
    	float: left;
    	line-height: 15px;
    	margin-left: 50px;
    	margin-top: 5px;
    	margin-bottom: 5px;
    }
    
    .right {
    	float: right;
    	line-height: 15px;
    	margin-right: 50px;
    	margin-top: 5px;
    	margin-bottom: 5px;
    }
    
    * {
    	margin: 0;
    	padding: 0;
    	list-style-type: none;
    }
    
    :focus {
    	outline: none;
    }
    
    a img {
    	border: 0px;
    }
    
    a {
    	text-decoration: none;
    	cursor: pointer;
    }
    
    .menu_division {
    	margin: 0px auto 0 auto;
    	width: 960px;
    	height: 38px;
    }
    
    .menu_body2 {
    	float: left;
    	width: 960px;
    	text-align: left;
    	background: url(../images/qiantai/menu_bg2.gif) left repeat-x;
    	height: 38px;
    }
    
    .menu_left_part2 {
    	float: left;
    	width: 6px;
    	height: 38px;
    	background: url(../images/qiantai/menu_left_img2.gif) no-repeat;
    }
    
    .menu_right_part2 {
    	float: right;
    	width: 6px;
    	height: 38px;
    	background: url(../images/qiantai/menu_right_img2.gif) no-repeat;
    }
    
    .menu_content2 {
    	padding: 6px 5px 0px 5px;
    	font-weight: bold;
    }
    
    .menu_content2 ul {
    	list-style-type: none;
    	float: left;
    }
    
    .menu_content2 li {
    	float: left;
    	margin-right: 5px;
    	display: inline;
    }
    
    .menu_content2 li:hover {
    	background: #ffffff;
    	margin-right: 5px;
    	float: left;
    	color: #0a4b6d;
    }
    
    .menu_content2 a {
    	color: #d4d7da;
    	padding: 5px 20px 5px 20px;
    	display: block;
    }
    
    .menu_content2 a:hover {
    	color: #0a4b6d;
    	padding: 5px 20px 5px 20px;
    }
    
    li.menu_content2_active {
    	background: #ffffff;
    	margin-right: 5px;
    	float: left;
    }
    
    .menu_content2_active a {
    	color: #0a4b6d;
    	padding: 5px 20px 5px 20px;
    }
    
    /* search_body2 */
    .search_body2 {
    	margin-top: 2px;
    	color: #0a4b6d;
    	width: 220px;
    	height: 20px;
    	float: right;
    	background: url(../images/qiantai/search_input_bg2.gif) no-repeat;
    }
    
    .search_body2 a {
    	padding: 0px;
    	display: inline-block;
    }
    
    .search_body2 a:hover {
    	padding: 0px;
    	display: inline-block;
    }
    
    .search_body2 .text {
    	margin: 1px 0px 0px 3px;
    	width: 180px;
    	color: #0a4b6d;
    	background: none;
    	border: none;
    	vertical-align: top;
    }
    
    .search_body2 .btn {
    	margin: 1px 0px 0px 8px;
    }
    
    .center_division {
    	margin: 1px auto 0 auto;
    	width: 960px;
    }
    
    .center_body {
    	float: left;
    	width: 960px;
    	text-align: left;
    	background-image: url(../images/qiantai/test.jpg);
    }
    
    .center_body_menu {
    	width: 960px;
    	padding-top: 5px;
    	padding-left: 0px;
    	padding-right: 0px;
    	padding-bottom: 1px;
    }
    
    .center_menu {
    	padding-top: 5px;
    	padding-left: 5px;
    	height: 24px;
    }
    
    #yltable {
    	border-collapse: collapse;
    	background-color: #FFF;
    	width: 960px;
    	padding-top: 5px;
    	color: #000;
    	line-height: 28px;
    	font-size: 12px;
    }
    
    #tb {
    	border-collapse: collapse;
    	background-color: #FFF;
    	width: 960px;
    	padding-top: 5px;
    	color: #000;
    	line-height: 28px;
    	font-size: 12px;
    }
    
    tr {
    	text-align: center;
    }
    
    td {
    	border: 1px solid #CCC;
    }
    
    .buttom {
    	text-align: center;
    	margin-top: 0px;
    }
    
    .button_sm {
    	width: 131px;
    	height: 37px;
    	line-height: 37px;
    	font-size: 20px;
    	font-weight: bold;
    	color: white; 
    	background-image : url("../images/qiantai/but_sm_t.jpg");
    	background-repeat: no-repeat;
    	background-position: left;
    	border: 0px;
    	cursor: pointer;
    	background-image: url("../images/qiantai/but_sm_t.jpg");
    }
    
    .button_fsm {
    	width: 131px;
    	height: 37px;
    	line-height: 37px;
    	font-size: 20px;
    	font-weight: bold; 
    	color: white; 
    	background-image :url("../images/qiantai/but_sm_t.jpg");
    	background-repeat: no-repeat;
    	background-position: left;
    	border: 0px;
    	cursor: pointer;
    	background-image: url("../images/qiantai/but_sm_t.jpg");
    }
    
    .button_sm_grey {
    	width: 131px;
    	height: 37px;
    	line-height: 37px;
    	background-image: url("../images/qiantai/but_sm_grey_t.jpg");
    	background-repeat: no-repeat;
    	font-size: 20px;
    	color: white; 
    	font-weight: bold;
    	background-position: left;
    	border: 0px;
    	cursor: pointer;
    }
    
    .button_fsm_grey {
    	width: 131px;
    	height: 37px;
    	line-height: 37px;
    	font-size: 20px;
    	color: white; 
    	font-weight: bold;
    	background-image: url("../images/qiantai/but_sm_grey_t.jpg");
    	background-repeat: no-repeat;
    	background-position: left;
    	border: 0px;
    	cursor: pointer;
    }

js：自己下载个jquery-1.7.2.min.js就可以。

html:

<!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;"
    							οnclick="inserttable()" />      <input
    							type="button" name="button" value="删 除"
    							style="width:60px; height:24px;" οnclick="deletetable()" /></td>
    					</tr>
    				</table>
    			</form>
    		</div>
    	</div>
    </body>
    </html>

[SouthEast]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/820c5dc6044f4a3089de434e312952f1.png
[SouthEast 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/20be5c0560bb44ab93357a4294711e9e.png