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

于 2020-12-15 19:26:26 发布
阅读量1k 收藏 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
关注
专栏目录
使用jquery实现table表格的动态添加行和列
tan_xiao_tan的博客
07-07 3181
<table class="table" border="1px" cellspacing="0" cellpadding="0" width="300"> <thead> <tr> <td>标题一</td> <td>标题二</td> <td>标题三</td> </tr> </thead>
jQuery实现GridView列表自定义显示列
baobaolaogong的专栏
05-15 4463
一个系统中有时候会为了方便用户操作，由用户决定显示列表中的哪些数据，示例如下： 下面我们看下用jQuery如何实现，有哪些注意点。 抽出来的公用的jQuery代码如下： $(document).ready(function() { //显示默认列 ErgodicCbl(); //单击确定按钮触发 $("input[belong='btnQu
jquery table 添加、删除行、列
08-21
使用jquery对行列进行删除、新增,动态添加。
jQuery如何追加tr到table中？
fishermanmax的博客
03-20 6693
jQuery 添加新内容有以下四个方法： append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 下面实例演示：点击按钮则在表格数据区域增加一行 1、HTML结构 列1列2列3 112
jQuery Datatable 自定义列
weixin_34101229的博客
05-06 574
jQuery Datatable是一个很强大的表格工具，其实大家可以参考Datatable官方网站来查看具体的实例以及他对应的API。在此我们不去讲解如何实现后端的分页、排序、查找，本文重点讲解如何对Datatable中的表格内容进行操作，包括改变他的样式、增加一列非数据列以及非数据列传递主键参数。首先，我们来定义我们的数据，本文就不去通过后端代码实现数据传递，就直接通过一个...
JQuery 自定义 Table
05-23
动态构建个TABle,只要传入几个参数就可以生成一个TABLE ，
jquery创建自定义表格
weixin_45216092的博客
11-02 683
根据自己所输入的宽、高、行、列来指定自己所要创建的表格。 源代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="WEB-INF/js/jquery-3.1.1.min.js"></script> ...
Jquery实现的table最后一行添加样式的代码
10-29
在给定的标题和描述中，我们关注的是如何使用 jQuery 来给 HTML 表格（table）的最后一行添加特定的样式，以增强视觉效果和用户体验。以下是一个详细的解释和扩展这个功能的方法。 首先，我们需要了解 HTML 的 `...
Jquery Table 固定行和列
05-03
本项目涉及的主题是“jQuery Table 固定行和列”，这是一个常见需求，特别是对于那些展示大量数据的网页应用，它能帮助用户在滚动时保持表头和侧边栏可见，提高可读性和用户体验。 首先，`superTables.css`是样式表...
jQuery插件冻结行列、固定列固定行，html、table实现
06-05
该插件名为"jQuery-Plugin-To-Freeze-Table-Columns-Rows-On-Scroll"，其主要功能是在表格滚动时保持顶部行和左侧列固定，以便用户在浏览长表格时仍能清晰地看到表头和关键列。以下我们将深入探讨这个插件的工作原理...
jQuery自定义添加删除表格行内容特效.zip
最新发布
09-21
本项目“jQuery自定义添加删除表格行内容特效”是基于jQuery实现的一种交互式功能，它允许用户动态地在表格中添加和删除行，大大提升了用户体验。下面将详细介绍这一功能的实现原理和关键代码。 首先，我们需要理解...
jquery 自定义插件(操作table、编辑table、表头拖动、隔行换色等.....),可按需求配置，在加一个可拖动的DIV代码
03-24
NULL 博文链接：https://xiaomaha.iteye.com/blog/1106606
jquery 自定义插件(操作table、编辑table、表头拖动、隔行换色等.....),可按需求配置，在加一个可拖动的DIV代码 ...
06-27 495
open-open.com 看到N多老外写的插件 于是今天看了下jquery文档也自己来两个，献丑啦！ 需求: 一：操作table 1、无侵入式可编辑 2、隔行换色 3、拉动表头，自定义宽度 4、可编辑 5、编辑后的数据颜色区分 5、css文件自己定义，无需和插件绑定，这样更加灵活 6、一切可配置 1：名字就叫bestTable ...
jqTable 添加删除一列
cymlancy的专栏
03-03 3032
JQUERY TABLE table {     border-collapse: collapse;     border-spacing: 0;     margin-right: auto;     margin-left: auto;     width: 800px;  }  th, td  {     border: 1px solid #b5d6e6;  
JQuery自动为表格增加一列
十年回首，一纸感动!
11-13 728
  &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根据数据实现增加或者减少“行合并”rowspan
现役码农的博客
10-21 3576
最近实现了一个个人绩效计划的需求，要求实现一个能够手动增加或者减少行合并的功能 就是填写一个主考核项，然后有多个子考核项。 下面是html和js部分代码 &lt;table id="first0" cellspacing="0" border="1" class="valueTable"&gt; &lt;tr&gt; &lt;td width="50px"
jquery 中table动态添加行和删除列操作
热门推荐
Tiger的专栏
05-30 1万+
1.简单的table使用定义&lt;table class="table table-bordered table-hover" style="text-align: center;" id="Result"&gt; &lt;thead&gt; &lt;tr&gt; &lt;
jQuery动态增加表格，增加行，并添加ID
farmwang的专栏
09-12 2992
&lt;!DOCTYPE&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;test&lt;/title&gt; &lt;script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"&gt;&l
javascript中给table添加新的行列
秋尾鸣的博客
03-24 749
JS原生写法<script> var t = document.getElementById("test"); t.innerHTML = "<tr><td>数据</td></tr>"; //或者 var t = document.getElementById("test"); var tr = document.createElement("tr"); var td = doucment.cr
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值