叶签形式的表格制作

第一步：制作表格

   var data = ${empty data ? "‘‘" : data};
	 var kpiTabData = data["kpiTabData"];
	 var kpiObjectList = data["kpiObjectList"];

var row3 = ‘<tr name="data_row">‘;
	    row3 += ‘<td name="row_checkbox" height="26px" style="text-align:center"><a class="icon-remove" title="Delete" style="cursor:pointer;"></a><input name="id" type="hidden" value="" /><input name="sno" type="hidden" value="" /></td>‘;
		row3 += ‘<td name="level"><input type="text" value="" /></td>‘;
		row3 += ‘<td name="M-1"><input type="text" value="" /></td>‘;
		row3 += ‘<td name="remark" class="bg_green" style="width:200px;"><textarea class="bg_green" style="width:100%;border:0px solid" maxlength="500"></textarea></td>‘;
	    row3 += ‘</tr>‘;

第二步：遍历list，将数据传入表格中

if(kpiObjectList){
	    	addKpiListRows();
	    }else{
	    	addRow3(1,1,projectCode);
	    }

    function addKpiListRows(){
	    	if(kpiObjectList.length > 0){
	    		for(var k=0;k<kpiTabData.length;k++){
			    	for(var i=0;i<kpiObjectList.length;i++){
			    		var rowobj = $(row3);
				    	$(rowobj).attr("id","row_"+ i);
				    	$(rowobj).find("td[name=‘row_checkbox‘]").find("input[name=‘sno‘]").val(kpiObjectList[i]["sort"]);
				    	$(rowobj).find("td[name=‘row_checkbox‘]").find("input[name=‘id‘]").val(kpiObjectList[i]["id"]);
						$(rowobj).find("td[name=‘level‘]").find("input").val(kpiObjectList[i]["kpiIndName"]);
						$(rowobj).find("td[name=‘M-1‘]").find("input").val(kpiObjectList[i]["kpiIndRequire"]);
						$(rowobj).find("td[name=‘remark‘]").children("textarea").val(kpiObjectList[i]["remarks"]);
						if(kpiObjectList[i]["kpiIndTypeValue"]==kpiTabData[k]["value"]){ // 判断语句十分关键   会从这个判断语句找到相应的叶签将数据放上去
							$("#kpi"+kpiTabData[k]["value"]).append($(rowobj));    //将数据添加到相应的标签上
						}
			    	}

		    	}
		    }else{
		    	addRow3(1,1,projectCode);
		    }
	    }

第三步：制作活体叶签

  <div class="page_step2">

						<div class="page_con">
							<h1>
								<div class="accordion-heading">
									<a class="accordion-toggle collapsed" data-toggle="collapse"
										data-href="collapsekpi" href="#collapsekpi"> <i
										class="icon-chevron-right"></i> <span class="projectCss">合同要求KPI/KQI</span>
									</a>
								</div>
							</h1>
							<div style="height:10px;">
							</div>

                          <！---  //叶签制作 -->
							<div id="collapsekpi" class="panel-collapse collapse">

								<ul id="myTab" class="nav nav-tabs">
									<c:forEach items="${kpiTabList}" var="item" varStatus="status">

										<li><a href="#tab${item.value}" data-toggle="tab">${item.label}</a></li>

									</c:forEach>
								</ul>
								<div id="myTabContent" class="tab-content">
								<！---遍历list将叶签放在表头位置，实现活（叶签）样式 -->
									<c:forEach items="${kpiTabList}" var="item" varStatus="status">
										<div class="tab-pane fade" id="tab${item.value}">
								<！---将table的id的名称附上活的id值 便于对应相应的表格，便于js遍历处的数据放在相应得table表格上 -->
											<table id="kpi${item.value}" width="100%" cellpadding="0"
												cellspacing="0">
												<tr class="tb_tt">
													<td style="width: 80px;">操作</td>
													<td>KPI 指标名称<font color="red">*</font></td>
													<td>指标要求<font color="red">*</font></td>
													<td>计算公式描述<font color="red">*</font></td>
												</tr>
											</table>
											<！---将其设置成按钮的格式，点击的时候执行mytable(str)函数，将当前遍历的值传入函数，便于找到相应的表格，将空白栏添加进去-->
											<a href="#javascript:;" id="kpi_add${item.value}"
												name="kpi_add${item.value}" style="display: inline-block;"
												class="btn_add" type="button"
												onclick="mytable(${item.value});"></a>
										</div>

									</c:forEach>
								</div>
								<script>
							    $(function () {
							        $(‘#myTab li:eq(0) a‘).tab(‘show‘);
							    });
							</script>
							</div>

						</div>

					</div>

add按钮请求的方法  将添加的表格放在相应的列表中   

		function mytable(str,projectCode){

					var lastRow = $("#kpi"+str+" tr").length;   //最后一行的长度
					var sno = $("#kpi"+str+" tr:last").find("td[name=‘row_checkbox‘]").find("input[name=‘sno‘]").val()*1+1;

			var row3 = ‘<tr name="data_row">‘;
			    row3 += ‘<td name="row_checkbox" height="26px" style="text-align:center"><a class="icon-remove" title="Delete" style="cursor:pointer;"></a><input name="id" type="hidden" value="" /><input name="sno" type="hidden" value="" /></td>‘;
				row3 += ‘<td name="level"><input type="text" value="" /></td>‘;
				row3 += ‘<td name="M-1"><input type="text" value="" /></td>‘;
				row3 += ‘<td name="remark" class="bg_green" style="width:200px;"><textarea class="bg_green" style="width:100%;border:0px solid" maxlength="500"></textarea></td>‘;
			    row3 += ‘</tr>‘;

							var objRow = $(row3);
							if(isNaN(sno)){   //当有些遍历出来的标签其下面没有数据的时，添加新数据第一条的sno将会是NaN这个值，传入后端遍历将会出错，必须判断很重要这一步。
								sno=1;
							}
							objRow.find("td[name=‘row_checkbox‘]").find("input[name=‘sno‘]").val(sno);
								$("#kpi"+str).append(objRow);

		}

第四步：存入数据传入后台

//注意的是定义变量的时候一定要注意作用域，不然很多都是无效的引入，到处是undefined
                  var data = ${empty data ? "‘‘" : data};
					var kpiTabData = data["kpiTabData"];
					var kpiData =[];
					for(var p=0;p<kpiTabData.length;p++){

					$("#kpi"+kpiTabData[p]["value"]).find("tr[name=‘data_row‘]").each(function(index,elment){
						var obj = {};
						obj.id = $(elment).find("td[name=‘row_checkbox‘]").find("input[name=‘id‘]").val();
						obj.sort = $(elment).find("td[name=‘row_checkbox‘]").find("input[name=‘sno‘]").val();
						obj.projectBasicId = projectId;
						//将对应的kpiTabData[p]["label"]放进去，因为前台的kpiIndType是隐藏的，但是数据库中需要值
						obj.kpiIndType = kpiTabData[p]["label"];
						obj.kpiIndName = $(elment).find("td[name=‘level‘]").find("input").val();
						obj.kpiIndRequire = $(elment).find("td[name=‘M-1‘]").find("input").val();
						obj.remarks = $(elment).find("td[name=‘remark‘]").children("textarea").val();
						kpiData.push(obj);

						if($(elment).find("td[name=‘level‘]").find("input").val() == ‘‘) {
							oo = $(elment).find("td[name=‘level‘]").find("input");
							oox = "请输入KPI指标名称！";
							isnext = true;
							return false;
						}

						if($(elment).find("td[name=‘M-1‘]").find("input").val() == ‘‘) {
							oo = $(elment).find("td[name=‘M-1‘]").find("input");
							oox = "请输入指标要求！";
							isnext = true;
							return false;
						}

						/*if($(elment).find("td[name=‘remark‘]").children("textarea").val() == ‘‘) {
							oo = $(elment).find("td[name=‘remark‘]").children("textarea");
							oox = "请输入计算公式描述！";
							isnext = true;
							return false;
						}*/
					});

					}

					kpiData = JSON.stringify(kpiData);
// 					window.alert("kpiDatas%%%%%"+kpiDatas);
					if(isnext && kpiData != "[]"){
						alert(oox);
						oo.focus();
						return false;
					}
					$.post("${ctx}/delivery/platform/saveContractInfoData",{projectId:"${projectInfo.id}",manageData:manageData,serviceData:serviceData,slaData:slaData,kpiData:kpiData},function(result){
						if(result=="success"){
							if(resultType == ‘2‘){
								alert("Save data success!");
								window.location.reload();
							}
						}else if(result == "fail"){
							if(resultType == ‘2‘){
								alert("Save data fail!");
							}
						}
					});
				}else{
					if(resultType == ‘2‘){
						alert("Please select a project!");
					}
				}
			}

原文地址：https://www.cnblogs.com/jiajialeps/p/10163114.html