前台拼接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);
}
}
大佬勿喷,欢迎提意见建议评论!!!!