前几天公司要求根据json数据动态加载表格，具体需求就是表格的一切内容都不固定，th，td需要根据内容动态加载，还要有点击事件传参。
最开始的想法：
1. 因为要兼容ie8,所以一些各种好使的框架都不能用，只能用最原生的或者js来编写。
2.本来需求没搞明白，直接写ajax中data[i].title之类的获取数据。
然后把之前的for循环换成for in 循环，但是json数据是嵌套关系，所以for in 循环把里面的数组都循环出来了
但是对于动态加载只能用用for in循环来写，所以更改了json格式（因为我公司都是前端自己写假json给后台去组成对应的格式）
页面效果~
有同样需求的可以直接拿过去修改使用~
下面放代码~
js
// An highlighted block
var table = document.getElementById("table");
var tr, td;
$.ajax({
type:"get",
url:"h.json",
async:true
})
.done(function(jsondata){
for (i in jsondata) {
tr = document.createElement("tr"); //创建tr
//________________创建表头________________________________________
if (i == 0) {
for (j in jsondata[i]) { //根据数据在tr内创建td
th = document.createElement("th");
th.appendChild(document.createTextNode(jsondata[i][j]));
tr.appendChild(th);
if(j=="title"){
th.setAttribute("class","hide");
}
}
$("thead").append(tr);
var title="<h2>"+jsondata[i].title+"</h2>";
$(".unit").before(title);
}
//________________创建数据行________________________________________
else {
for (j in jsondata[i]) { //根据数据在tr内创建td
td = document.createElement("td");
td.appendChild(document.createTextNode(jsondata[i][j]));
tr.appendChild(td);
if(j=="pro_t"){
td.style.fontWeight="bold";
td.setAttribute("colspan","2" )
td.setAttribute("class","plan");
}else if(j=="total"){
td.style.fontWeight="bold";
td.setAttribute("colspan","2" )
}
if(j=="pc_plan"){
td.setAttribute("onclick","plan(this)" )
}
if(j=="pc_s"){
td.setAttribute("onclick","started(this)" )
}
}
$("tbody").append(tr);
}
}
document.getElementsByClassName("tableInfo")[0].appendChild(table);
$("table tr").find("td:eq(1)").addClass('hide started_id')
$("table tr").find("td:eq(0)").addClass('hide plan_id')
})
function plan(_this){
console.log($(_this).parent().find($(".plan_id")).html())//年度计划项目数点击事件传参的值
}
function started(_this){
console.log($(_this).parent().find($(".started_id")).html())//年度计划项目数点击事件传参的值
}
html
// An highlighted block
<div class="tableInfo" >
<div class="unit">单位：个、万元</div>
<table id="table" border="1" cellspacing="0" cellpadding="0">
<thead></thead>
<tbody></tbody>
</table>
</div>
css
// An highlighted block
.hide{
background: red;
display:none;
}
table{
text-align: center;
margin: 0 auto;
}
thead th{
height: 60px;
padding: 0 6px;
}
table td{
padding:5px;
}
a{
cursor:pointer;
display: block;
color: #0000CC;
}
.tableInfo h2{
text-align: center;
}
.tableInfo .unit{
margin-left: 63%;
margin-bottom: 10px;
}
json格式
// An highlighted block
[
{
"title":"{xx}年度1-{yy}月计划内对外捐赠（公益基金会管理）项目进度表",
"serial":"序号",
"department":"申报部门单位",
"plan":"年度计划项目数",
"started":"已启动项目数",
"proportion":"启动比例",
"budget":"年度预算金额",
"allocated":"已拨付金额",
"comment":"备注"
},
{
"plan_id":"pro_plan_id",
"started_id":"pro_star_id",
"total":"合计",
"pc_plan":"2",
"pc_s":"5",
"pc_pro":"6",
"pc_bud":"453",
"pc_allo":"54",
"pc_com":"yyy"
},
{
"plan_id":"pro_plan_id",
"started_id":"pro_star_id",
"pro_t":"一、常规捐赠项目",
"pc_plan":"2",
"pc_s":"5",
"pc_pro":"6",
"pc_bud":"453",
"pc_allo":"54",
"pc_com":"yyy"
},
{
"plan_id":666,
"started_id":66,
"index":"1",
"name":"集团本部",
"pc_plan":"647",
"pc_s":"467",
"pc_pro":"56",
"pc_bud":"4567456",
"pc_allo":"5757",
"pc_com":"yyy"
},
{
"plan_id":44,
"started_id":444,
"index":"2",
"name":"枢纽管理局",
"pc_plan":"32",
"pc_s":"5",
"pc_pro":"6",
"pc_bud":"453",
"pc_allo":"54",
"pc_com":"yyy"
}
]
基于某位大佬的代码思路进行编写，该大佬文章链接地址现在找不着了，等我找到立马补上~