在JavaScript中创建表格

情境：点击搜索按钮之后，原来没有数据的表格一下就多了好多数据。

分析：数据的获取肯定是从后台得到的，但是表格的创建以及表格的属性则是在JavaScript中完成的。

步骤归纳：1.for循环完成对多组数据的重复设置。

 2.对每组数据来说，需要得到数据的值，还需要为这组数据新添一行。

 3.然后根据这组数据量的多少安排合适的列存放即可，同时可以给该列设置属性。

function createTable(empTable,jsonOut){

for(var i=0;i<jsonOut.length;i++){ //当多个数据进来，for循环遍历所有的数据

var jsonObj=jsonOut[i]; //挑出其中一组数据
var trRow=empTable.insertRow(empTable.rows.length); //给表格新增一行

var td1=trRow.insertCell(0); //新增行的第一列

var checkBox="<input type=\"checkbox\" name=\"checkboxName\"  />";
var deptCode="<input type=\"hidden\" name=\"hiddenDeptCode\" value=\""+jsonObj.deptCode+"\"  />";

//实例多选框以及隐藏的部门编号

td1.align="center";
td1.setAttribute("width",50);
td1.setAttribute("height",30);
td1.setAttribute("rowspan",1);
td1.setAttribute("colspan",1); //设置第一列的属性
td1.innerHTML=checkBox; //将多选框和隐藏的部门编号放进第一列
td1.innerHTML+=deptCode;

var td2=trRow.insertCell(1); //新增行第二列
td2.align="center";
td2.setAttribute("width",50);
td2.setAttribute("height",30);
td2.setAttribute("rowspan",1);
td2.setAttribute("colspan",1); //设置第二列的属性
td2.innerHTML=jsonObj.deptName; //将值放进去

}

}