js動態增加，刪除td，tr，table，div

js實現的動態添加，刪除table內容：

截圖如下：

源代碼：

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>