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

at小涛

 关注

阅读 64

2022-11-24


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

截图如下：

1.

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

 

2.

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

 

源代码：

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>

 

 

相关推荐

jq 动态增加、删除表tr行

爱情锦囊 77 0 0

javascript table 动态创建 tr ，删除tr 等相关操作

年夜雪 41 0 0

jquery 动态增加table行，动态删除table行

上古神龙 75 0 0

jquery实现table tr td重组排序号

孟祥忠诗歌 58 0 0

常用的js动态增加（删除）table数据行的功能

闲嫌咸贤 26 0 0

js对table实现增加和删除行

年迈的代码机器 88 0 0

JQUERY 通过td找到tr

江南北 40 0 0

td中嵌套table，让table完全填充父元素td

IT程序员 84 0 0

jquery 动态增加删除行

盖码范 87 0 0

增加、动态修改、批量删除

柠檬的那个酸_2333 43 0 0

精彩评论（0）

0 0 举报