本文主要是介绍js动态增加，删除td，tr，table，div，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
js实现的动态添加，删除table内容：
截图如下：
1.
2.
源代码：
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">主体类别<fontcolor="#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">名称<fontcolor="#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()" /> <inputtype="button" name="button" value="删 除"style="width:60px; height:24px;" οnclick="deletetable()" /></td></tr></table></form></div></div>
</body>
</html>
这篇关于js动态增加，删除td，tr，table，div的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
