jquery根据勾选动态生成树形表格

最新推荐文章于 2024-08-10 08:45:22 发布
最新推荐文章于 2024-08-10 08:45:22 发布
阅读量297 收藏
点赞数 1
分类专栏： jquery 文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39232387/article/details/108405523
版权

根据勾选不同规格的种类，动态创建表格，点击加号可以添加种类，目前没实现改变输入框的值实时改变表格对应的值，只能通过再次勾选改变。表格开关默认开启。
资源demo下载地址：
https://download.csdn.net/download/qq_39232387/13192560
小白的我第一次写难度这么大的，写了三天，以后想到简单方法再分享
1。默认
在这里插入图片描述2.勾选后
在这里插入图片描述3.勾选后在这里插入图片描述4.需要引入jQuery和对应图片
在这里插入图片描述5.代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">		
			input {
				outline: none;
			}
			.disposeBox {
				width: 899px;
				height: auto;
				background:rgba(254,252,240,1);
				border:1px solid rgba(191,191,191,1);
				padding: 30px 0 21px 33px;
			}
			.dispose_a {
				margin-bottom: 25px;
				font-weight:bold;
				color:rgba(92,92,92,1);
				font-size:14px;
			}
			.dispose_b {
				height: auto;
				overflow: hidden;
			}
			.dispose_b > div {
				float: left;
			}
			
			.yesBox {
				width:20px;
				height:20px;
				border:1px solid rgba(191,191,191,1);
				margin-right: 9px;
			}
			.addO {
				width: 22px;
				height: 21px;
				margin-left: 9px;
			}
			.customBox {
				width: auto;
				height: 32px;
				display: flex;
				align-items: center;
			   margin-bottom: 15px;
			   margin-right: 45px;
			}
			.customBox input {
				width:91px;
				height:29px;
				background:rgba(255,255,255,1);
				border:1px solid rgba(191,191,191,1);
				border-radius:4px;
				text-align: center;
			}
			.disposeBox input::-webkit-input-placeholder{
				color:rgba(184,182,182,1);
				text-align: center;
			}
			.disposeBox input::-moz-placeholder{  
				color:rgba(184,182,182,1);
				text-align: center;
			}
			.disposeBox input:-moz-placeholder{ 
				color:rgba(184,182,182,1);
				text-align: center;
			}
			.disposeBox input:-ms-input-placeholder{ 
				color:rgba(184,182,182,1);
				text-align: center;
			}
			.yesBox1 {
			    background: url(yes.png) no-repeat;
			    background-position:center;
				background-size: 16px 10px;
			}
			li {
				list-style: none;
			}
			#tbd {
				font-size: 14px;
				text-align: center;
			}
			#tbd td{
				border-right: 1px solid #BFBFBF;
			}
			#tbd input,#tbd select {
				width: 90px;
				outline: none;
				height: 22px;
				text-align: center;
				display: block;
				border: 0;
			}
			.priceBox_head {
				height: 35px;
				background: #E5E5E5;
			}
			.priceBox_head th {
				padding: 0 11px;
			}
			.grade1 {
				border-bottom: 1px solid #BFBFBF;
				box-sizing: border-box;
			}
			.grade2 div {
				border-bottom: 1px solid #BFBFBF;
				box-sizing: border-box;
			}
			.grade3 div,.td4 div,.td5 div,.td6 div,.td7 div,.td8 div,.td9 div,.td10 div,.td11 div {
				height: 25px;
				line-height: 25px;
				border-bottom: 1px solid #BFBFBF;
				box-sizing: border-box;
			}
			.customBox1 input {
				width: 30px;
				border: 0;
				background-color: rgba(254,252,240,1);
				text-align: left;
			}
			.customBox1 {
				margin-right: 22px ;
				
			}
		</style>
	</head>
	<body>
        <div class="disposeBox">
			<div class="dispose">
				<div class="dispose_a">请选择您的商品包装(<span style="color: #FE7474;">至少选择一项</span>)</div>
				<div class="dispose_b dispose_b1">
					<div class="customBox customBox1">
						<div class="yesBox yes1"></div>
						<input type="text" name="" id="" value="瓶" placeholder="瓶" unselectable="on" />
					</div>
					<div class="customBox customBox1">
						<div class="yesBox yes1"></div>
						<input type="text" name="" id="" value="桶" placeholder="桶" unselectable="on" />
					</div>
					<div class="customBox customBox1">
						<div class="yesBox yes1"></div>
						<input type="text" name="" id="" value="袋" placeholder="袋" unselectable="on" />
					</div>
					<div class="customBox customBox1">
						<div class="yesBox yes1"></div>
						<input type="text" name="" id="" value="槽车" placeholder="槽车" unselectable="on" />
					</div>
					<div class="customBox">
						<div class="yesBox yes1"></div>
						<input type="text" name="" id="" value="" placeholder="自定义"/>
						<img class="addO" src="add.png" alt="">
					</div>
				</div>
			</div>
			<div class="dispose">
				<div class="dispose_a">请选择您的商品<span>纯度</span>(<span style="color: #FE7474;">至少选择一项并填写</span>)</div>
				<div class="dispose_b dispose_b2">
					<div class="customBox">
						<div class="yesBox yes2"></div>
						<input type="text" name="" id="" value="" placeholder="自定义"/>
						<img class="addO" src="add.png" alt="">
					</div>
				</div>
			</div>
			<div class="dispose">
				<div class="dispose_a">请选择您的商品<span>数量</span>(<span style="color: #FE7474;">至少选择一项并填写</span>)</div>
				<div class="dispose_b dispose_b3">
					<div class="customBox">
						<div class="yesBox yes3"></div>
						<input type="text" name="" id="" value="" placeholder="自定义" id="upload"/>
						<img class="addO" src="add.png" alt="">
					</div>
				</div>
			</div>
		</div>
		<br>	
		<br>									
		<table class="priceBox" border="0" cellpadding="0" cellspacing="0">
			<thead>
				<tr class="priceBox_head" style="display: none;">
					<th style="display: none;">包装</th>
					<th style="display: none;">纯度</th>
					<th style="display: none;">数量</th>
					<th>商城价/￥</th>
					<th>市场价/￥</th>
					<th>价格单位</th>
					<th>库存</th>
					<th>期货/天</th>
					<th>规格说明</th>
					<th>最低起订量</th>
					<th>开关</th>
				</tr>
			</thead>
			<tbody id="tbd">
			</tbody>
		</table>
		<script type="text/javascript" src="jquery-2.1.1.js"></script>
		<script>
			$(function(){
				//点击+
				$(document).on('click', '.addO', function(){
					$(this).hide()
					$(this).parent('.customBox').parent('.dispose_b1').append( " <div class='customBox'><div class='yesBox yes1'></div><input type='text' name='' id='' value='' placeholder='自定义' /><img class='addO' src='add.png' alt=''></div> " );
					$(this).parent('.customBox').parent('.dispose_b2').append( " <div class='customBox'><div class='yesBox yes2'></div><input type='text' name='' id='' value='' placeholder='自定义' /><img class='addO' src='add.png' alt=''></div> " );
					$(this).parent('.customBox').parent('.dispose_b3').append( " <div class='customBox'><div class='yesBox yes3'></div><input type='text' name='' id='' value='' placeholder='自定义' /><img class='addO' src='add.png' alt=''></div> " );
					
				})
				//点击显示隐藏对勾
				$(document).on('click', '.yesBox', function(){
					if($(this).hasClass("yesBox1") ){
						console.log($(this).hasClass("yesBox1"))
						$(this).removeClass("yesBox1")
					}else if($(this).siblings("input").val() != ""){
						$(this).addClass("yesBox1");
					}
					var gradeArr1 = [];
					var gradeArr2 = [];
					var gradeArr3 = [];
					//第一级数组
					$(".yes1").siblings("input").each(function (i) {			 
						if($(this).val() != "" && $(this).siblings(".yes1").hasClass("yesBox1")){
							gradeArr1.push($(this).val());
						}						  
					});
					console.log(gradeArr1);
					//第二级数组
					$(".yes2").siblings("input").each(function (i) {			 
						if($(this).val() != "" && $(this).siblings(".yes2").hasClass("yesBox1")){
							gradeArr2.push($(this).val());
						}						  
					});
					console.log(gradeArr2);
					//第三级数组
					$(".yes3").siblings("input").each(function (i) {			 
						if($(this).val() != "" && $(this).siblings(".yes3").hasClass("yesBox1")){
							gradeArr3.push($(this).val());
						}						  
					});
					console.log(gradeArr3);
					$("#tbd").html("");
					var arrLength1 = gradeArr1.length;
					var arrLength2 = gradeArr2.length;
					var arrLength3 = gradeArr3.length;
					if(arrLength1) {  //如果有第一列
						for(var i=0;i<arrLength1;i++) {
							$("#tbd").append("<tr class='priceBox_con'><td class='grade1'><div>"+gradeArr1[i]+"</div></td></tr>");
						}
						if(arrLength2) {   //如果有第二列
							$(".priceBox_con").append("<td class='grade2'></td>")
							for(var j=0;j<arrLength2;j++) {
								$(".grade2").append("<div>"+gradeArr2[j]+"</div>");
							}
							if(arrLength3) {   //如果有第三列
								$(".priceBox_con").append("<td class='grade3 maxLength'></td>");
								for(var m=0;m<arrLength2;m++) {
									for(var k=0;k<arrLength3;k++) {
										$(".grade3").append("<div>"+gradeArr3[k]+"</div>");
									}
								}
							}else {
								$(".grade2").addClass("maxLength")
							}
						}else {  //没有第二列
							if(arrLength3) {   //如果有第三列
								$(".priceBox_con").append("<td class='grade3 maxLength'></td>");
								for(var k=0;k<arrLength3;k++) {
									$(".grade3").append("<div>"+gradeArr3[k]+"</div>");
								}	
							}else {
								$(".grade1").addClass("maxLength")
							}
						}
					}else {   //没有第一列
						if(arrLength2) {  //如果有第二列
							for(var j=0;j<arrLength2;j++) {
								$("#tbd").append("<tr class='priceBox_con'><td class='grade2'><div>"+gradeArr2[j]+"</div></td></tr>");	
							}
							if(arrLength3) {   //如果有第三列
								$(".priceBox_con").append("<td class='grade3 maxLength'></td>")
								for(var k=0;k<arrLength3;k++) {
									$(".grade3").append("<div>"+gradeArr3[k]+"</div>");
								}
							}else {
								$(".grade2").addClass("maxLength")
							}
						}else {  //没有第二列
							if(arrLength3) {  //如果有第三列
								for(var k=0;k<arrLength3;k++) {
									$("#tbd").append("<tr class='priceBox_con'><td class='grade3 maxLength'><div>"+gradeArr3[k]+"</div></td></tr>");	
								}
							}else {
							}
						}
					}
					if($(".maxLength").length > 0) {
						$(".priceBox_con").append("<td class='td4'></td>");
						$(".priceBox_con").append("<td class='td5'></td>");
						$(".priceBox_con").append("<td class='td6'></td>");
						$(".priceBox_con").append("<td class='td7'></td>");
						$(".priceBox_con").append("<td class='td8'></td>");
						$(".priceBox_con").append("<td class='td9'></td>");
						$(".priceBox_con").append("<td class='td10'></td>");
						$(".priceBox_con").append("<td class='td11'></td>");
						var maxLengthNum = $("#tbd tr:eq(0) .maxLength").children("div").length;
						console.log(maxLengthNum)
						for(var n=0;n<maxLengthNum;n++) {
							$(".td4").append("<div><input type='text' name='' id='' value='' placeholder='请输入价格'/></div>");
							$(".td5").append("<div><input type='text' name='' id='' value='' placeholder='请输入价格'/></div>");
							$(".td6").append("<div><select name=''><option value=''>克(g)</option><option value=''>千克(Kg)</option><option value=''>毫升(ml)</option><option value=''>升(L)</option><option value=''>吨(t)</option><option value=''>瓶</option><option value=''>桶</option><option value=''>车</option><option value=''>箱</option><option value=''>袋</option></select></div>");
						    $(".td7").append("<div><input type='text' name='' id='' value='' placeholder='请点击输入'/></div>");
							$(".td8").append("<div><input type='text' name='' id='' value='' placeholder='请点击输入'/></div>");
							$(".td9").append("<div><input type='text' name='' id='' value='' placeholder='例:25g/瓶'/></div>");
							$(".td10").append("<div><input type='text' name='' id='' value='' placeholder='请点击输入'/></div>");
						    $(".td11").append("<div><img class='table_open' src='table_open.png' alt=''><img class='table_close' style='display: none;' src='table_close.png' alt=''></div>")
						}
					};
					console.log(arrLength3 * 25);
					if(arrLength3 > 0) {
						$(".grade2 div").css("height",arrLength3 * 25)
						$(".grade2 div").css("line-height",arrLength3 * 25 + "px")
						$(".grade3 div").css("height","25px")
					}else {
						$(".grade2 div").css("height","25px")
					}
					
					if(arrLength1) {
						$(".priceBox_head th:eq(0)").show();
					}else {
						$(".priceBox_head th:eq(0)").hide();
					}
					if(arrLength2) {
						$(".priceBox_head th:eq(1)").show();
					}else {
						$(".priceBox_head th:eq(1)").hide();
					}
					if(arrLength3) {
						$(".priceBox_head th:eq(2)").show();
					}else {
						$(".priceBox_head th:eq(2)").hide();
					}
		            if(arrLength1 || arrLength2 || arrLength3) {
						$(".priceBox_head").show();
					}else {
						$(".priceBox_head").hide();
					}
				})
				var imgStatus = false;
				$(document).on('click', '.table_open', function() {
					imgStatus = false;
					$(this).hide()
					$(this).siblings(".table_close").show()
				})
			    $(document).on('click', '.table_close', function() {
			    	imgStatus = true;
			    	$(this).hide()
					$(this).siblings(".table_open").show()
			    })
				
			}) 
		</script>
	</body>
</html>
冰淇淋ly
关注
专栏目录
html可折叠的树,JS实现一键展开或收起折叠树/视图树所有节点
weixin_29232507的博客
06-01 1107
2.1 折叠树示例2.1.1 添加按钮打开%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\basic\复杂折叠树.cpt报表，并添加 2 个按钮。如图所示：2.1.2 添加事件1)给「展开」按钮控件添加「点击」事件。如下图所示：JavaScript 代码如下：//展开的最大节点级值var t = 3;for(var m = 1; m <= ...
jquery 实现的树形表格结构
01-16
treeTable是跨浏览器、性能很高的jquery的树表组件，它使用非常简单，只需要引用jquery库和一个js文件，接口也很简单。 优点 ◦兼容主流浏览器: 支持IE6和IE6+, Firefox, chrome, Opera, Safari ◦接口简洁: 在普通表格的基础上增加父子关系的自定义标签就可以 ◦组件性能高: 内部实现了只绑定了table的事件、使用了css sprite合并图片等 ◦提供两种风格: 通过参数来设置风格
jqueryTreeTable+ajax(构建树形表格)
05-28
jqery.treeTable + ajax + mysql数据库， ssm架构构建树形表格
jQuery Treetable 教程
最新发布
gitblog_00332的博客
08-10 280
jQuery Treetable 教程 jquery-treetablejQuery plugin to show a tree structure in a table项目地址:https://gitcode.com/gh_mirrors/jq/jquery-treetable 1. 项目目录结构及介绍 以下是jQuery Treetable项目的典型目录结构： . ├── css ...
使用JQuery TreeTable实现树形表格
热门推荐
PxzBoss的博客
12-25 3万+
首先了解什么是TreeTable？ treeTable 是跨浏览器、性能很高的 jQuery 的树表组件，它使用非常简单，只需要引用 jQuery 库和一个 js 文件，接口也很简单。 优点： 兼容主流浏览器：支持 IE6 和 IE6+, Firefox, chrome, Opera, Safari 接口简洁：在普通表格的基础上增加父子关系的自定义标签就可以 组件性能高：内部实现了只绑定了 ta...
jQuery制作树状表格
nayi_224的博客
04-26 2159
使用jQuery制作树状表格。将js文件地址修改后可直接运行。若需要改为动态页面，所需要修改的js以标注。 采用递归的方法对已展现的部分进行缓存。 表格内容采用html拼接，方便修改。 代码基本最简。没有做封装。 &amp;amp;lt;!DOCTYPE&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;title&a
jQuery动态树形表格插件
ICode联盟
05-18 670
下载地址 jQuery动态树形表格插件，treetable.js树形表格插件，通过调用json获取表格动态数据，支持全部展开、全部折叠、刷新表格、修改、删除等表格功能。扩展：菜单管理、深度测试、自定义图标、多表格、搜索功能等5种实例。 dd: ...
jquery-easyui-etree.zip
10-13
通过预定义的CSS样式和JavaScript插件，EasyUI提供了一系列直观易用的组件，如对话框、表格、菜单、树形视图等。这些组件使得开发者可以专注于业务逻辑，而无需过多关注UI的实现细节。 二、eTree组件介绍 eTree是...
EasyUI中的树形结构与菜单设计
# 1. 简介 ## 1.1 EasyUI框架概述 EasyUI是一款基于jQuery的开源UI框架，为Web开发提供了丰富的UI组件和简化了开发流程。它提供了一系列易于使用和高度可定制的UI组件，包括表格、表单、...树形结构和菜单是软件界
jQuery Easyui Treegrid实现显示checkbox功能
10-19
jQuery Easyui Treegrid 是一个强大的数据展示组件，它结合了树形结构和表格的优点，常用于管理层次结构的数据。在实际应用中，我们经常需要添加复选框（checkbox）功能，以便用户可以多选操作。本文将详细介绍如何...
vue+element-ui中实现多层级复杂的维度根据数据自动生成的表头
前端技术的学习整理
05-22 3万+
表头主要复杂在：1，有三层，一层是大类，第二层是具体项，第三层是标准值/对比值2，首列和末尾列是一层3，整个表格的维度是根据数据的输入自己生成，也就是动态的下面是在 vue + eleUI 中的解决方案：&lt;el-table :data="tableData" border style="width: 100%" max-height="700" v-loading="areaLoading"...
jquery-treegrid 树形表格组件
12-25
jquery-treegrid 树形表格组件 最新的treegrid 版本 下载
jquery实现自定义树形表格的方法【自定义树形结构table】
10-16
主要介绍了jquery实现自定义树形表格的方法,结合实例形式分析了jQuery创建自定义树形结构table的相关操作技巧,需要的朋友可以参考下
基于jQuery ztree实现表格风格的树状结构
12-10
zTree 简介     zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。     zTree 是开源免费的软件（MIT 许可证）。如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去，可以进行捐助。 zTree v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀 兼容 IE、FireFox、Chrome、Opera、Safari 等浏览器 支持 JSON 数据 支持静态 和 Ajax
树形表格菜单 动态添加节点/动态删除节点/动态移动节点
03-17
1.完整的包命名空间 2.自定义header footer 3.动态添加节点/动态删除节点/动态移动节点 4.动态dom对象创建表格树 5.完美支持json格式数据,支持xml(需转换) 6.支持ajax加载节点 7.事件驱动 8.可以动态根据列内容排序 9.简化函数参数,利用{} object输入参数,风格类似Extjs 10.树状结构可以选择出现在某一列,不一定要在第一列 11.支持theme,纯css定制表格树,可以自由定制theme,包括图标/节点大小等 12.表格树从右到左显示 13.本地节点搜索,服务器端节点搜索(未实现待完成) 14.无变化重新刷新整个树Refresh 15.支持插件开发,可以为树添加更多功能,例如下拉框树,选择框树,可编辑内容的树,拖动节点等都可以很容易自己实现或者根据第三方js实现
用jQuery的treetable实现的树形table
10-25
用jQuery的treetable实现的树形table
jQuery树形表格插件
xiemuyun的博客
04-28 1589
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;jQuery treetable&lt;/title&gt; &lt;link rel="stylesheet" href=
jquery 树形数据表格组件
分享我的编程经验和学习心得
08-01 1311
组件项目仓库地址 表格创建流程 1、创建工具栏 2、创建表头 3、通过AJAX取得数据并渲染表格 4、绑定各种事件 加载数据的方式有两种 1、直接加载全部 2、当点击要看的数据时再加载 &quot;越秀区&quot;:{ &quot;data&quot;: { &quot;arry&quot;:[50,100,100], &quot;hasData&quot;: &a
通过jquery-treegrid+bootstrap实现树形表格
寂寥人生
05-29 755
https://github.com/maxazan/jquery-treegrid
使用jQuery ztree创建动态多选树形菜单教程
"这篇文章主要讲解如何使用jQuery库中的ztree插件来实现动态树形多选菜单的功能。ztree是一个强大的JavaScript组件，适用于构建交互式的树状数据结构，支持多种操作，包括初始化加载和延迟加载。本文将介绍ztree的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值