情境:点击搜索按钮之后,原来没有数据的表格一下就多了好多数据。
分析:数据的获取肯定是从后台得到的,但是表格的创建以及表格的属性则是在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; //将值放进去
}
}