您的位置: 首页  >  文章  >  js动态增加，删除td，tr，table，div

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

分类: 文章 • 2023-03-25 20:47:55

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

截图如下：

1.

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

2.

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

源代码：

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


相关推荐