表結構

<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>