前台拼接table完成点击获取整行值(可以直接用)

前台拼接table完成点击获取整行值:

后台返回的数据:

{result0_6={paramitem=长度, rpstesttimeTime= 10:43:47, productserielno=001, batchno=1, processname=检验, productnum=001, rpstesttimeDate=2020-12-09, testvalue=123, operateor=, processno=1, cmmcount=20}, result7=[001, 002, 003, 004, 005, 006, 007, 008, 009, 010, 011, 012, 013, 014, 015, 016, 017, 018, 019, 020], result8=[长度--123--12--12--4--5--25--26--21--22--22--25--25--25--25--25--25--25--25--25--25]}

js拼接:

function querylist(){
	if(isEmpty($("#processid option:selected").val()) || isEmpty($("#batchno").val())){
		swal({
			title:"",
			text:"测量岗位/批次号不能为空",
			type:"warning"
		})
		return false;
	}
	$.ajax({
		url:"${ctx}/InspRecordController/dList",
		type:"post",
		data:{
			"processid":$("#processid option:selected").val(),
			"batchno":$("#batchno").val()
		},
		success:function(data){
			console.log(data);
			$("#h_3").hide();
			//alert();
			if(isEmpty(data.result8)){
				swal({
					title:"",
					text:"查询无果",
					type:"warning"
				})
			}else{
				var tr_0,tr_1,tr_2,tr_3,tr_4,tr_5,tr_6,tr_7,tr_8;
				for(var i=0;i<data.result0_6.cmmcount;i++){
					tr_0 += "<td>"+data.result0_6.productnum+"</td>";
					tr_1 += "<td>"+data.result0_6.processname+"</td>";
					tr_2 += "<td>"+data.result0_6.batchno+"</td>";
					tr_3 += "<td>"+data.result0_6.operateor+"</td>";
					tr_4 += "<td>"+data.result0_6.rpstesttimeDate+"</td>";
					tr_5 += "<td>"+data.result0_6.rpstesttimeTime+"</td>";
					tr_6 += "<td>"+data.result0_6.cmmcount+"</td>";
					tr_7 += "<td>"+data.result7[i]+"</td>";
				}
				for(var j = 0 ;j<data.result8.length;j++){
					var tr_8_result = data.result8[j].split("--");
					var a = '<tr><td><button class="btn btn-primary btn-sm" οnclick="spc()">spc</button></td>';
					for(var k = 0;k<tr_8_result.length;k++){
						a += '<td>'+tr_8_result[k]+'</td>';
					}
					a +='</tr>';
					tr_8 += a;
				}
				var t_tr =  '<tr><td colspan="2">零件号</td>'+tr_0+'</tr>'+
							'<tr><td colspan="2">测量岗位</td>'+tr_1+'</tr>'+
							'<tr><td colspan="2">批次号</td>'+tr_2+'</tr>'+
							'<tr><td colspan="2">检验员</td>'+tr_3+'</tr>'+
							'<tr><td colspan="2">日期</td>'+tr_4+'</tr>'+
							'<tr><td colspan="2">时间</td>'+tr_5+'</tr>'+
							'<tr><td colspan="2">检测数量</td>'+tr_6+'</tr>'+
							'<tr><td colspan="2">工件编号</td>'+tr_7+'</tr>'+tr_8;
				$("#t_table").html(t_tr); 
			}
		},
		error:function(){
			console.log("数据查询显示失败:/emrp/src/main/webapp/WEB-INF/views/aehPrdInspctionReport/dataView/inspRecordPage.html");
		}
	})
}

前台html:

<div style="width:1314px;  overflow:scroll;">
	<table class="table table-bordered table-striped" id="t_table" border="1" rules="all" style="width:2000px; height:100px; text-align:center">
		<h3 id="h_3" style="margin: 0px 0px -27px 538px;">暂无数据,请选择查询条件</h3>
	</table>
</div>

点击获取一行的所有td:

function spc(){
	 var vArray = new Array();
	 var tab = document.getElementById("t_table")
	 var tr = tab.getElementsByTagName("tr")
	 for(var i = 0; i < tr.length; i++) tr[i].onclick = function() {
		var thisTR = this.innerHTML; //所点击的一行内容
		/* var tow = $(this).children().eq(1).text(); //所点击的一行的第二个td内容 */
		var tds = $(this).children();
		console.log(tds);
		console.log(tds.length);
		for(var k = 1;k<tds.length;k++){
			var a = $(this).children()[k].innerHTML;
			//alert($(this).children()[k+1].innerHTML);
			vArray.push(a);
		} 
		 alert(vArray);
     }
}

大佬勿喷,欢迎提意见建议评论!!!!

上一篇:jssip无法识别以数字开始的域


下一篇:Dubbo核心源码剖析(集群 集群容错 负载均衡 服务治理 通信协议)