js中根據後臺返回結果動態建立表
表結構
<table id ="clTable" border="1">
<thead>
<tr >
<td style="display: none;">workid</td>
<td>材料名</td>
<td>提供方</td>
<td>規格</td>
</tr>
</thead>
<tbody id="ccltable"> </tbody>
</table>
js程式碼
function showmaterial(data1,data2){
document.getElementById('cailiaoxiangqing').innerHTML=data2;
document.getElementById('hideworkid').innerHTML=data1;
$.ajax({
url: "${servePath}/pc/wuye/getmaterialbyid",
data:{
"workid":data1
},
type:"post",
success : function(data) {
if (data.succeed) {
var tbody=document.getElementById('ccltable');
while(tbody.hasChildNodes()) //當div下還存在子節點時 迴圈繼續
{
tbody.removeChild(tbody.firstChild);
}
for (var i = 0; i < data.cllist.length; i++) {
var tr = document.createElement('tr');
var tdworkid = document.createElement('td');
tdworkid.setAttribute('id', 'workid');
tdworkid.setAttribute('style','display: none');
var tdname = document.createElement('td');
var tdcailiao = document.createElement('td');
var tdguige = document.createElement('td');
tdworkid.innerHTML=data.cllist[i].workorder_id;
tr.appendChild(tdworkid);
tdname.innerHTML=data.cllist[i].material_name;
tr.appendChild(tdname);
tdcailiao.innerHTML=data.cllist[i].supplier;
tr.appendChild(tdcailiao);
tdguige.innerHTML=data.cllist[i].specifications;
tr.appendChild(tdguige);
tbody.appendChild(tr);
}
}
}
});
}
</script>