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。

相关文章

golang实现动态路由的项目实践

golang实现动态路由的项目实践

《golang实现动态路由的项目实践》本文主要介绍了golang实现动态路由项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习... 目录一、动态路由1.结构体（数据库的定义）2.预加载preload3.添加关联的方法一、动态路由1
阅读更多...
Python对PDF书签进行添加,修改提取和删除操作

Python对PDF书签进行添加,修改提取和删除操作

《Python对PDF书签进行添加,修改提取和删除操作》PDF书签是PDF文件中的导航工具,通常包含一个标题和一个跳转位置,本教程将详细介绍如何使用Python对PDF文件中的书签进行操作... 目录简介使用工具python 向 PDF 添加书签添加书签添加嵌套书签Python 修改 PDF 书签Pytho
阅读更多...
CentOS7增加Swap空间的两种方法

CentOS7增加Swap空间的两种方法

《CentOS7增加Swap空间的两种方法》当服务器物理内存不足时,增加Swap空间可以作为虚拟内存使用,帮助系统处理内存压力,本文给大家介绍了CentOS7增加Swap空间的两种方法：创建新的Swa... 目录在Centos 7上增加Swap空间的方法方法一：创建新的Swap文件（推荐）方法二：调整Sww
阅读更多...
Python Selenium动态渲染页面和抓取的使用指南

Python Selenium动态渲染页面和抓取的使用指南

《PythonSelenium动态渲染页面和抓取的使用指南》在Web数据采集领域,动态渲染页面已成为现代网站的主流形式,本文将从技术原理,环境配置,核心功能系统讲解Selenium在Python动态... 目录一、Selenium技术架构解析二、环境搭建与基础配置1. 组件安装2. 驱动配置3. 基础操作模
阅读更多...
C#实现查找并删除PDF中的空白页面

C#实现查找并删除PDF中的空白页面

《C#实现查找并删除PDF中的空白页面》PDF文件中的空白页并不少见,因为它们有可能是作者有意留下的,也有可能是在处理文档时不小心添加的,下面我们来看看如何使用Spire.PDFfor.NET通过C#... 目录安装 Spire.PDF for .NETC# 查找并删除 PDF 文档中的空白页C# 添加与删
阅读更多...
VSCode中配置node.js的实现示例

VSCode中配置node.js的实现示例

《VSCode中配置node.js的实现示例》本文主要介绍了VSCode中配置node.js的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 目录一.node.js下载安装教程二.配置npm三.配置环境变量四.VSCode配置五.心得一.no
阅读更多...
SQL常用操作精华之复制表、跨库查询、删除重复数据

SQL常用操作精华之复制表、跨库查询、删除重复数据

《SQL常用操作精华之复制表、跨库查询、删除重复数据》：本文主要介绍SQL常用操作精华之复制表、跨库查询、删除重复数据,这些SQL操作涵盖了数据库开发中最常用的技术点,包括表操作、数据查询、数据管... 目录SQL常用操作精华总结表结构与数据操作高级查询技巧SQL常用操作精华总结表结构与数据操作复制表结
阅读更多...
慢sql提前分析预警和动态sql替换-Mybatis-SQL

慢sql提前分析预警和动态sql替换-Mybatis-SQL

《慢sql提前分析预警和动态sql替换-Mybatis-SQL》为防止慢SQL问题而开发的MyBatis组件,该组件能够在开发、测试阶段自动分析SQL语句,并在出现慢SQL问题时通过Ducc配置实现动... 目录背景解决思路开源方案调研设计方案详细设计使用方法1、引入依赖jar包2、配置组件XML3、核心配
阅读更多...
springboot使用Scheduling实现动态增删启停定时任务教程

springboot使用Scheduling实现动态增删启停定时任务教程

《springboot使用Scheduling实现动态增删启停定时任务教程》：本文主要介绍springboot使用Scheduling实现动态增删启停定时任务教程,具有很好的参考价值,希望对大家有... 目录1、配置定时任务需要的线程池2、创建ScheduledFuture的包装类3、注册定时任务，增加、删
阅读更多...
Pandas透视表(Pivot Table)的具体使用

Pandas透视表(Pivot Table)的具体使用

《Pandas透视表(PivotTable)的具体使用》透视表用于在数据分析和处理过程中进行数据重塑和汇总,本文就来介绍一下Pandas透视表(PivotTable)的具体使用,感兴趣的可以了解一下... 目录前言什么是透视表？使用步骤1. 引入必要的库2. 读取数据3. 创建透视表4. 查看透视表总结前言
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2