使用jQuery实现自定义添加table的行和列

最新推荐文章于 2024-04-19 10:18:52 发布
最新推荐文章于 2024-04-19 10:18:52 发布
阅读量928 收藏 1
点赞数 1
分类专栏： 前端 文章标签： javascript jquery css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zzy_2016/article/details/111235548
版权

需求：根据用户自己填写的两个参数来添加需要合并的行的总行数和每个合并行里面包含多少行。

  1. 图中input框中的2代表第一列有这样的黄色（或者别的颜色，一共设置了4种颜色是一个循环）
  2. 3代表每种颜色下的行数

在这里插入图片描述jsp页面代码

<div class="main-container" id="main-container">
		<!-- /section:basics/sidebar -->
		<div class="main-content">
			<div class="main-content-inner">
				<div class="page-content">
					<div class="row ">
						<div class="col-xs-24">
						<!-- 检索  -->
						<form action="cmmshadowdetail/list.do" method="post" name="Form" id="Form">
						<!-- <input type="text" id="encoderContent"  value="" style="width:300px;"> -->
						<input type="hidden" name="encoderContent" id="encoderContent" value="${pd.ENCODERCONTENT}"/>
						
						<table style="margin-top:5px;">
							<tr>
								<td>
									<div class="nav-search">
										<span class="input-icon">
											<input type="text" placeholder="请先输入Glass_ID" class="nav-search-input" id="keywords" autocomplete="off" name="keywords" value="" placeholder="这里输入关键词"/>
											<i class="ace-icon fa fa-search nav-search-icon"></i>
										</span>
									</div>
								</td>
								<td style="vertical-align:top;padding-left:2px"><a class="btn btn-light btn-xs" onclick="tosearch();"  title="检索"><i id="nav-search-icon" class="ace-icon fa fa-search bigger-110 nav-search-icon blue"></i></a></td>
								<td>
								 	<input type="number" placeholder="样品个数" class="table_row" id="table_row" autocomplete="off" name="table_row" value="" placeholder=""/>
									<input type="number" placeholder="每个样品对应的点位数" class="table_row1" id="table_row1" autocomplete="off" name="table_row1" value="" placeholder=""/>
								</td>
							 	<td style="vertical-align:top;padding-left:2px"><a class="btn btn-xs btn-success" onclick="createTable();">添加单元格</a></td>
								<td style="vertical-align:top;padding-left:2px;">
									<%-- <c:if test="${QX.add == 1 }"> --%>
									<a class="btn btn-xs btn-success" onclick="save();">保存</a>
									<%-- </c:if> --%>
								</td>	
							</tr>
						</table>
						<!-- 检索  -->
						<!-- 信息标签 -->
						<table  class="table  table-bordered table-hover" style="margin-top:10px;">
							<c:forEach items="${varList}" var="var" varStatus="vs">
							<tr>
								<td>蒸镀日期</td>
								<td><input name="EVAPORATION_DATE" readonly="readonly" id="EVAPORATION_DATE" value="${var.EVAPORATION_DATE}" type="text"   placeholder=""/></td>
								<td>蒸镀时间</td>	
								<td><input name="EVAPORATION_TIME" readonly="readonly" id="EVAPORATION_TIME" value="${var.EVAPORATION_TIME}" type="text"   placeholder="" /></td>
								<td>chamber</td>
								<td><input name="CHAMBER" readonly="readonly" id="CHAMBER" value="${var.CHAMBER}" type="text"placeholder="" /></td>
								<td>Mask_ID</td>	
								<td><input name="MASK_ID" readonly="readonly" id="MASK_ID" value="${var.MASK_ID}" type="text"placeholder="" /></td>
							</tr>
							<tr>
								<td style="color:red"><B>Glass_ID</B></td>
								<td><input name="GLASS_ID" readonly="readonly" id="GLASS_ID" value="${var.GLASS_ID}" type="text"placeholder=""  /></td>
								<td>取出时间</td>	
								<td><input name="REMOVAL_TIME" readonly="readonly" id="REMOVAL_TIME" value="${var.REMOVAL_TIME}" type="text"placeholder="" /></td>
								<td>目标膜厚</td>
								<td><input name="TARGET_FILM_THICKNESS" readonly="readonly" id="TARGET_FILM_THICKNESS" value="${var.TARGET_FILM_THICKNESS}" type="text"placeholder="" /></td>
								<td>操作人</td>	
								<td><input name="OPERATOR" readonly="readonly" id="OPERATOR" value="${var.OPERATOR}" type="text"placeholder="" /></td>
							</tr>
							<tr>
								<td>量测日期</td>
								<td><input name="MEASURE_DATE" readonly="readonly" id="MEASURE_DATE" value="${var.MEASURE_DATE}" type="text"placeholder="" /></td>
								<td>量测人员</td>
								<td><input name="MEASURE_PERSON" readonly="readonly" id="MEASURE_PERSON" value="${var.MEASURE_PERSON}" type="text"placeholder="" /></td>
								<td>备注</td>
								<td><input name="REMARK" readonly="readonly" id="REMARK" value="${var.REMARK}" type="text"placeholder="" /></td>	
							</tr>
							</c:forEach>
						</table>
						<!-- 信息标签 -->
						<table id="AddStyle" class="table table-striped table-bordered table-hover" style="margin-top:5px;">	
							<!-- table-striped 隔行换色   simple-table -->
							<tbody>
							   <tr>
									<td class="center"colspan="13"><b>Measurement量测参数记录</b></td>
							   </tr>
							   <tr>
									<td class="center">Range</td>
									<td class="center"style="width:95px"><input name="range" id="range" value="${pd.RANGE}" type="text"   placeholder=""style="width:90%;"/></td>
									<td class="center">Length</td>
									<td class="center"colspan="2"><input name="length" id="length" value="${pd.LENGTH}" type="text" placeholder="" style="width:90%;"/></td>
									<td class="center">Duration</td>
									<td class="center"colspan="2"><input name="duration" id="duration" value="${pd.DURATION}" type="text"  placeholder="" style="width:90%;"/></td>
									<td class="center">Stylus Force</td>
									<td class="center"colspan="3"><input name="stylus_force" id="stylus_force" value="${pd.STYLUS_FORCE}" type="text"placeholder="" style="width:90%;"/></td>
								</tr>
							   <tr>
									<td class="center">日期</td>
									<td class="center">时间</td>
									<td class="center"colspan="5">NOOZLE</td>
									<td class="center"colspan="6">SCAN</td>
								</tr>
								<tr>
									<td class="center"colspan="2">参考值</td>
									<td class="center"><input name="film_thickness1_standard" id="film_thickness1_standard" value="" type="number"placeholder="" style="width:90%;"/></td>
									<td class="center"></td>
									<td class="center"><input name="A1_standard" id="A1_standard" value="" type="number"placeholder="" style="width:90%;"/></td>
									<td class="center"><input name="B1_standard" id="B1_standard" value="" type="number"placeholder="" style="width:90%;"/></td>
									<td class="center"><input name="C1_standard" id="C1_standard" value="" type="number"placeholder="" style="width:90%;"/></td>
									<td class="center"></td>
									<td class="center"><input name="film_thickness2_standard" id="film_thickness2_standard" value="" type="number"placeholder="" style="width:90%;"/></td>	
									<td class="center"></td>
									<td class="center"><input name="A2_standard" id="A2_standard" value="" type="number"placeholder="" style="width:90%;"/></td>
									<td class="center"><input name="B2_standard" id="B2_standard" value="" type="number"placeholder="" style="width:90%;"/></td>
									<td class="center"><input name="C2_standard" id="C2_standard" value="" type="number"placeholder="" style="width:90%;"/></td>
								</tr>
								<tr>
									<td class="center"colspan="2">误差百分比( <B>%</B>)</td>
									<td class="center"><input οninput="if(value>100)value=100;if(value.length>3)value=value.slice(0,4);if(value<0)value=0"name="film_thickness1_percent" id="film_thickness1_percent" value="" type="number"placeholder="" style="width:90%;"/></td>
									<td class="center"></td>
									<td class="center"><input οninput="if(value>100)value=100;if(value.length>3)value=value.slice(0,4);if(value<0)value=0" name="A1_percent" id="A1_percent" value="" type="number"placeholder="" style="width:90%;"/></td>
									<td class="center"><input οninput="if(value>100)value=100;if(value.length>3)value=value.slice(0,4);if(value<0)value=0" name="B1_percent" id="B1_percent" value="" type="number"placeholder="" style="width:90%;"/></td>
									<td class="center"><input οninput="if(value>100)value=100;if(value.length>3)value=value.slice(0,4);if(value<0)value=0"name="C1_percent" id="C1_percent" value="" type="number"placeholder="" style="width:90%;"/></td>
									<td class="center"></td>
									<td class="center"><input οninput="if(value>100)value=100;if(value.length>3)value=value.slice(0,4);if(value<0)value=0"name="film_thickness2_percent" id="film_thickness2_percent" value="" type="number"placeholder="" style="width:90%;"/></td>	
									<td class="center"></td>
									<td class="center"><input οninput="if(value>100)value=100;if(value.length>3)value=value.slice(0,4);if(value<0)value=0"name="A2_percent" id="A2_percent" value="" type="number"placeholder="" style="width:90%;"/></td>
									<td class="center"><input οninput="if(value>100)value=100;if(value.length>3)value=value.slice(0,4);if(value<0)value=0"name="B2_percent" id="B2_percent" value="" type="number"placeholder="" style="width:90%;"/></td>
									<td class="center"><input οninput="if(value>100)value=100;if(value.length>3)value=value.slice(0,4);if(value<0)value=0"name="C2_percent" id="C2_percent" value="" type="number"placeholder="" style="width:90%;"/></td>
								</tr>
							 <tr>
									<td class="center" >样品编号</td>
									<td class="center">点位</td>
									<td class="center">膜厚</td>
									<td class="center">95%膜厚</td>
									<td class="center">A</td>
									<td class="center">B</td>
									<td class="center">C</td>
									<td class="center">点位</td>
									<td class="center">膜厚</td>
									<td class="center">95%膜厚</td>
									<td class="center">A</td>
									<td class="center">B</td>
									<td class="center">C</td>
								</tr>
							</tbody>
						</table>
						<div class="page-header position-relative">
						<%-- <table style="width:100%;">
							<tr>
								<td style="vertical-align:top;">
									<c:if test="${QX.add == 1 }">
									<a class="btn btn-mini btn-success" onclick="add();">新增</a>
									</c:if>
									<c:if test="${QX.add == 1 }">
									<a class="btn btn-mini btn-info" onclick="makeAll('确定要删除选中的数据吗?');">批量打印</a>
									</c:if>
									<c:if test="${QX.del == 1 }">
									<a class="btn btn-mini btn-danger" onclick="makeAll('确定要删除选中的数据吗?');" title="批量删除" ><i class='ace-icon fa fa-trash-o bigger-120'></i></a>
									</c:if>
								</td>
								<td style="vertical-align:top;"><div class="pagination" style="float: right;padding-top: 0px;margin-top: 0px;">${page.pageStr}</div></td>
							</tr>
						</table> --%>
						</div>
						<!--  <td align="right"><button  onClick="window.print()">打印</button>&nbsp;</td>-->
						</form>
						</div>
						<!-- /.col -->
					</div>
					<!-- /.row -->
				</div>
				<!-- /.page-content -->
			</div>
		</div>
		<!-- /.main-content -->

		<!-- 返回顶部 -->
		<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
			<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
		</a>

	</div>

js代码

 function createTable(){ 
	    	//先扫码获取信息标签里面信息，用GLASS_ID来判断
	    	  if($("#GLASS_ID").val()==undefined  ||$("#GLASS_ID").val()==""||$("#GLASS_ID").val()==null){
  			//if($("#GLASS_ID").val().length>0){		    	
	    		 /*  alert("请先扫码获取信息标签！！！");
	    		  return; */
	    	  }
	    	  var tr=$("#table_row").val();
	    	  var td=$("#table_row1").val();
	    		  //$("#AddStyle tbody").append('<tr></tr>').addClass('tr1');
	    		  //给添加的每个tr加上id，id是递增的
	    		//  $("#AddStyle tbody").append('<tr></tr>');
	    		  //tr的总数量
	    		  var len=$("#AddStyle > tbody > tr").length;
	    		  var num=0;
	    		  //防止第二次添加时出错
 			       var twiceDo=0;
	  			   if (len>6) {
	 				 	twiceDo=len-6; 
	 			    }
	    		  for (var j = 1; j <= td*tr; j++) {
	    			  num++;
	    			  var num1=Number(num)+Number(td);
	    			//   len=len+j;
	    			  //$("#AddStyle tbody").append('<tr id='+"clone"+len+'>'
	  				  $("#AddStyle tbody").append('<tr id="clone">'
	    					    //+'<td class="center bg-warning"style="visible:none;"><input class="span10 date-picker" placeholder="" style="width:98%;" id='+"sample_no"+j+'></input></td>'
	  							//+'<td class="center"colspan="1"value='+num+' id='+"point_position"+j+'>'+num+'</td>'
	  							+'<td class="center" id='+"point_position"+(j+twiceDo)+' >'+num+'</td>'
	  							+'<td class="center"><input type="number"style="width:98%" onmousewheel="return false;"οnchange="rangeCheck(this)" autocomplete="off"placeholder="" id='+"film_thickness1_"+j+'></input></td>'
	  							+'<td class="center"><input type="number"style="width:98%" onmousewheel="return false;" readonly autocomplete="off" placeholder=""id='+"film_thickness95_1_"+j+'></input></td>'
	  							+'<td class="center"><input type="number"style="width:98%" onmousewheel="return false;"οnblur="rangeCheck(this)"autocomplete="off" placeholder=""id='+"A1_"+j+ '></input></td>'
	  							+'<td class="center"><input type="number"style="width:95%" onmousewheel="return false;"οnblur="rangeCheck(this)"autocomplete="off" placeholder=""id='+"B1_"+j+ '></input></td>'
	  							+'<td class="center"><input type="number"style="width:95%" onmousewheel="return false;"οnblur="rangeCheck(this)"autocomplete="off" placeholder=""id='+"C1_"+j+ '></input></td>'
	  							+'<td class="center" id='+"point_position1_"+j+' >'+num1+'</td>'
	  							+'<td class="center"><input type="number"style="width:95%" onmousewheel="return false;"οnblur="rangeCheck(this)"autocomplete="off" placeholder=""id='+"film_thickness2_"+j+ '></input></td>'
	  							+'<td class="center"><input type="number"style="width:95%" onmousewheel="return false;" readonly autocomplete="off" placeholder=""id='+"film_thickness95_2_"+j+ '></input></td>'
	  							+'<td class="center"><input type="number"style="width:95%" onmousewheel="return false;"οnblur="rangeCheck(this)"autocomplete="off" placeholder=""id='+"A2_"+j+ '></input></td>'
	  							+'<td class="center"><input type="number"style="width:95%" onmousewheel="return false;"οnblur="rangeCheck(this)"autocomplete="off" placeholder=""id='+"B2_"+j+ '></input></td>'
	  							+'<td class="center"><input type="number"style="width:95%" onmousewheel="return false;"οnblur="rangeCheck(this)"autocomplete="off" placeholder=""id='+"C2_"+j+ '></input></td>'
	  							+'<td class="center"style="display:none"><input type="text" autocomplete="off" placeholder=""id='+"hidden_sample"+j+ '></input></td>'
	  							+'</tr>'
	  							)
	    			    if(j%td==0) {
						 num=0;						
						}		
	    		  }
  			      
  			    	//第一次操作时直接根据用户填的tr来合并就可以了
  			    	//第二次操作的时候要合并的列的序号要加上已经存在的tr，这样才能保证第二次循环合并的时候不会影响第一次的单元格
	    		   for (var i = 0; i < tr; i++) {
	    			   //需要加上rowspan的行数
	    			    var tr_eq=6+td*i+twiceDo;
	    			    //if($("#AddStyle tbody").children("tr:eq("+tr_eq+")").attr("id")!="clone"){}
	    			    	//添加合并的 第一列																						
							$("#AddStyle tbody").children("tr:eq("+tr_eq+")").children("td:eq(0)").before('<td class="center aaa" value="" id='+"sample_no"+(i+1)+ ' rowspan='+ td +'><input type="number" onmousewheel="return false;"placeholder=""style="width:98%"></input></td>')
							/* $("#AddStyle tbody").children("tr:eq("+tr_eq+")").children("td:eq(0)").attr("rowspan",td);
							$("#AddStyle tbody").children("tr:eq("+tr_eq+")").children("td:eq(0)").removeAttr("display"); */
							//换颜色
							switch (i%4) {
							case 0:
								$("#AddStyle tbody").children("tr:eq("+tr_eq+")").children("td:eq(0)").addClass("bg-warning");
								break;
							case 1:
								$("#AddStyle tbody").children("tr:eq("+tr_eq+")").children("td:eq(0)").addClass("bg-danger");
								break;
							case 2:
								$("#AddStyle tbody").children("tr:eq("+tr_eq+")").children("td:eq(0)").addClass("bg-info");
								break;
							case 3:
								$("#AddStyle tbody").children("tr:eq("+tr_eq+")").children("td:eq(0)").addClass("bg-success");
								break;						
  				}				
			}
	    }
zzy_2016
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用jquery实现table表格的动态添加行和列
tan_xiao_tan的博客
07-07 2970
<table class="table" border="1px" cellspacing="0" cellpadding="0" width="300"> <thead> <tr> <td>标题一</td> <td>标题二</td> <td>标题三</td> </tr> </thead>
使用jquery制作动态生成table,使用JQ实现全选,复选,全不选
艺博❀
07-02 1267
本编主要讲解,使用JQ实现,table列表的动态生成,复选框的勾选状态,在复选框全部勾选后,全选按钮自动勾选, 如复选框没有全部选中,则全选框不会改变状态.
JQuery DataTables 列自定义数据类型排序
热门推荐
WJL_MGQS的专栏
09-28 1万+
JQuery DataTables 列自定义数据类型排序
jQuery Datatable 自定义列
weixin_34101229的博客
05-06 547
jQuery Datatable是一个很强大的表格工具，其实大家可以参考Datatable官方网站来查看具体的实例以及他对应的API。在此我们不去讲解如何实现后端的分页、排序、查找，本文重点讲解如何对Datatable中的表格内容进行操作，包括改变他的样式、增加一列非数据列以及非数据列传递主键参数。首先，我们来定义我们的数据，本文就不去通过后端代码实现数据传递，就直接通过一个...
JQuery DataTables 自定义列渲染
u013239476的博客
10-28 739
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"> <scrip...
jQuery如何追加tr到table中？
fishermanmax的博客
03-20 6628
jQuery 添加新内容有以下四个方法： append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 下面实例演示：点击按钮则在表格数据区域增加一行 1、HTML结构 列1列2列3 112
JQuery自动为表格增加一列
十年回首，一纸感动!
11-13 684
  &lt;%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %&gt;&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or
jquery获取当前table所在行的索引
Believe980的博客
05-16 461
jquery获取当前table所在行的索引
在jQuery中添加表格行
kalman2019的博客
12-31 2267
在 jQuery 中将附加行作为最后一行添加到表中的最佳方法是什么？这可以接受吗？您可以添加到这样的表中的内容是否有限制（例如输入、选择、行数）？
Jquery实现的table最后一行添加样式的代码
12-10
效果如下图所示： 豪情 .tab{border-collapse:collapse;border:1px solid #9BDF70;} .tab td{border-bottom:1px solid #92B0DD;text-align:center;} .tab th{border-bottom:2px solid #92B0DD;...
jquery table 添加、删除行、列
08-21
使用jquery对行列进行删除、新增,动态添加。
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
01-21
Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件，支持Canvas和Table两种渲染方式，它的优点是在客户端动态生成，减轻了服务端压力，尤其是在大量使用二维码的系统中。Jquery.Qrcode主要包括以下...
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
01-19
相信用过Jquery UI 的都知道这是selectable的功能，然而我们如果用Vue开发的话没有类似的插件，当然你仍然可以把jquery的拿过来直接用，但是我又不想引入jquery 和 jquery UI在我的项目中，于是我就自己尝试着实现...
jquery对table做排序操作的实例演示
10-19
主要介绍了jquery对table做排序操作的实例演示,通过添加自定义属性data-sort-field-ftime及表头添加onchange事件详细讲解了操作过程,需要的朋友可以参考下
bootstrap table单元格新增行并编辑
12-11
table单元格新增行并编辑，具体内容如下 需要 bootstrap.min.css —— [ Bootstrap ] jquery-1.8.2.min.js —— [ Jquery ] 代码 <html> <head> <meta ...
JEECG表格选中状态怎么去掉
最新发布
weixin_39031037的博客
04-19 137
官网代码（在取消选中状态的时候不生效）
使用 Fetch API 执行 GraphQL 查询和变体
ikxin的博客
04-15 1113
GraphQL 是从远程服务器查询数据的强大工具，也是我构建 API 的首选方式。对一些人来说，学习它可能有一定难度，因为教程通常使用 Apollo 或 Relay 等工具进行编写。这些工具很不错，但通常更适用于复杂项目。在某些情况下，最好选择更轻量级的方法，并且不要通过添加额外的库增加包大小。在这种情况下，你可以直接使用浏览器中提供的工具，在本快速教程中，我们将使用在你的浏览器中通常可用的fetch。让我们首先简单地回顾一下fetch。
PLSQL的下载与安装
code袁的博客
04-18 298
🦁作者简介：一名喜欢分享和记录学习的在校大学生💥个人主页code袁💥个人QQ🐯个人wechat：code8896凭借其语法突出显示、SQL和PL/SQL帮助、对象描述、代码助手、编译器提示、重构、PL/SQL美化器、代码内容、代码层次结构、代码折叠、超链接导航、宏库和许多其他复杂功能，Unicode兼容编辑器甚至会吸引最苛刻的用户。手动码字，如有错误，欢迎在评论区指正💬~你的支持就是我更新的最大动力💪~
js的filter函数
xiaohua0708day的博客
04-14 287
这个函数接收数组中的每个元素作为参数，并检查该元素是否是偶数。如果是偶数，函数返回。是一个数组方法，它创建一个新数组，其包含通过提供的函数实现的测试的所有元素。函数遍历数组中的每个元素，并只将那些使测试函数返回。在这个箭头函数版本中，我们直接返回了表达式。在上面的代码中，我们传递了一个匿名函数给。方法就会将该元素包含在新数组中。，则该元素会被包含在新数组中。在JavaScript中，的元素包含在新数组中。
html做table某一列的合计,Jquery、js计算table列合计
05-17
可以通过以下步骤使用 jQuery 计算 table 列合计： 1. 给每个需要计算的单元格添加一个自定义类，例如 `sum`。 2. 使用 jQuery 选择器选中所有带有这个类的单元格。 3. 遍历每个选中的单元格，将它们的值相加。 4. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值