var data = {"listDetailDataBean":[{"deptCode":"1111","deptName":"实习部","empAnnualIncome":"1120.00","empJob":"实习0","empName":"员工名0","empNumber":"S1312300"},{"deptCode":"1111","deptName":"实习部","empAnnualIncome":"1120.00","empJob":"实习1","empName":"员工名1","empNumber":"S1312301"},{"deptCode":"1111","deptName":"实习部","empAnnualIncome":"1120.00","empJob":"实习2","empName":"员工名2","empNumber":"S1312302"},{"deptCode":"1111","deptName":"实习部","empAnnualIncome":"1120.00","empJob":"实习3","empName":"员工名3","empNumber":"S1312303"}]}
这样的json我们怎么把它遍历输出呢,答案就是用多重循环。
var trStr = '';
$.each(data,function(tmp,tb){
$.each(tb,function(i,n){
trStr += '<tr height="25px" class="example">';//拼接处规范的表格形式
trStr += '<td colspan="2" width="10%" align="center">' + n.empNumber + '</td>';
trStr += '<td colspan="3" width="15%" align="center">' + n.empName + '</td>';
trStr += '<td colspan="3" width="15%" align="center">' + n.empJob + '</td>';
trStr += '<td colspan="4" width="20%" align="right">' + n.empAnnualIncome + '</td>';
trStr += '<td colspan="3" width="15%" align="center">' + n.deptCode + '</td>';
trStr += '<td colspan="5" width="25%" align="left">' + n.deptName + '</td>';
trStr += '</tr>';
});
});
$("#tbody").html(trStr);
html页面代码如下:
<table id="mm" border="1">
<tbody id="tbody"> </tbody>
</table>
结果如下
S1312300 | 员工名0 | 实习0 | 1120.00 | 1111 | 实习部 | ||||||||||||||
S1312301 | 员工名1 | 实习1 | 1120.00 | 1111 | 实习部 | ||||||||||||||
S1312302 | 员工名2 | 实习2 | 1120.00 | 1111 | 实习部 | ||||||||||||||
S1312303 | 员工名3 | 实习3 | 1120.00 | 1111 | 实习部 |