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

2024-03-02 23:38
文章标签 动态 div js 删除 table 增加 td tr

本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/767781。

相关文章

C#如何动态创建Label,及动态label事件

C#如何动态创建Label,及动态label事件

《C#如何动态创建Label,及动态label事件》：本文主要介绍C#如何动态创建Label,及动态label事件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录C#如何动态创建Label,及动态label事件第一点：switch中的生成我们的label事件接着，
阅读更多...
SpringCloud动态配置注解@RefreshScope与@Component的深度解析

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.
阅读更多...
MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL？1.2 动态SQL的优点1.3 动态S
阅读更多...
macOS无效Launchpad图标轻松删除的4 种实用方法

macOS无效Launchpad图标轻松删除的4 种实用方法

《macOS无效Launchpad图标轻松删除的4种实用方法》mac中不在appstore上下载的应用经常在删除后它的图标还残留在launchpad中，并且长按图标也不会出现删除符号，下面解决这个问... 在 MACOS 上，Launchpad（也就是「启动台」）是一个便捷的 App 启动工具。但有时候，应
阅读更多...
Mysql删除几亿条数据表中的部分数据的方法实现

Mysql删除几亿条数据表中的部分数据的方法实现

《Mysql删除几亿条数据表中的部分数据的方法实现》在MySQL中删除一个大表中的数据时,需要特别注意操作的性能和对系统的影响,本文主要介绍了Mysql删除几亿条数据表中的部分数据的方法实现,具有一定... 目录1、需求2、方案1. 使用 DELETE 语句分批删除2. 使用 INPLACE ALTER T
阅读更多...
GORM中Model和Table的区别及使用

GORM中Model和Table的区别及使用

《GORM中Model和Table的区别及使用》Model和Table是两种与数据库表交互的核心方法,但它们的用途和行为存在著差异,本文主要介绍了GORM中Model和Table的区别及使用,具有一... 目录1. Model 的作用与特点1.1 核心用途1.2 行为特点1.3 示例China编程代码2. Tab
阅读更多...
C++从序列容器中删除元素的四种方法

C++从序列容器中删除元素的四种方法

《C++从序列容器中删除元素的四种方法》删除元素的方法在序列容器和关联容器之间是非常不同的,在序列容器中,vector和string是最常用的,但这里也会介绍deque和list以供全面了解,尽管在一... 目录一、简介二、移除给定位置的元素三、移除与某个值相等的元素3.1、序列容器vector、deque
阅读更多...
C++原地删除有序数组重复项的N种方法

C++原地删除有序数组重复项的N种方法

《C++原地删除有序数组重复项的N种方法》给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度,不要使用额外的数组空间,你必须在原地修改输入数组并在使用O(... 目录一、问题二、问题分析三、算法实现四、问题变体：最多保留两次五、分析和代码实现5.1、问题分析5.
阅读更多...
SpringBoot项目使用MDC给日志增加唯一标识的实现步骤

SpringBoot项目使用MDC给日志增加唯一标识的实现步骤

《SpringBoot项目使用MDC给日志增加唯一标识的实现步骤》本文介绍了如何在SpringBoot项目中使用MDC（MappedDiagnosticContext）为日志增加唯一标识,以便于日... 目录【Java】SpringBoot项目使用MDC给日志增加唯一标识,方便日志追踪1.日志效果2.实现步
阅读更多...
SQL Server清除日志文件ERRORLOG和删除tempdb.mdf

SQL Server清除日志文件ERRORLOG和删除tempdb.mdf

《SQLServer清除日志文件ERRORLOG和删除tempdb.mdf》数据库再使用一段时间后,日志文件会增大,特别是在磁盘容量不足的情况下,更是需要缩减,以下为缩减方法：如果可以停止SQLSe... 目录缩减 ERRORLOG 文件（停止服务后）停止 SQL Server 服务：找到错误日志文件：删除
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2