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>