表格的头部已经写好
表头
表头
表头
表头
表头
//根据json数据在表下面自动添加数据
传递的json如下
var json = {
a:{"a":"北京市",
"b":"东城区",
"c":"西城区",
"d":"朝阳区",
"e":"丰台区"},
b:{"a":"石景山区",
"b":"海淀区",
"c":"门头沟区",
"d":"房山区",
"e":"通州区"},
c:{"a":"顺义区",
"b":"昌平区",
"c":"大兴区",
"d":"怀柔区",
"e":"平谷区"},
d:{"a":"密云区",
"b":"延庆区",
"c":"天津市",
"d":"和平区",
"e":"河东区"},
e:{"a":"河西区",
"b":"南开区",
"c":"河北区",
"d":"红桥区",
"e":"东丽区"},
f:{"a":"西青区",
"b":"津南区",
"c":"北辰区",
"d":"武清区",
"e":"宝坻区"},
q:{"a":"北京市",
"b":"东城区",
"c":"西城区",
"d":"朝阳区",
"e":"丰台区"},
w:{"a":"石景山区",
"b":"海淀区",
"c":"门头沟区",
"d":"房山区",
"e":"通州区"},
r:{"a":"顺义区",
"b":"昌平区",
"c":"大兴区",
"d":"怀柔区",
"e":"平谷区"},
t:{"a":"密云区",
"b":"延庆区",
"c":"天津市",
"d":"和平区",
"e":"河东区"},
y:{"a":"河西区",
"b":"南开区",
"c":"河北区",
"d":"红桥区",
"e":"东丽区"},
u:{"a":"西青区",
"b":"津南区",
"c":"北辰区",
"d":"武清区",
"e":"宝坻区"}
};
js代码部分:
- 创建一个五列的数据
//console.log(json[i])
row = tbody.insertRow(tbody.rows.length);
row.insertCell(0).innerHTML =json[i].a;
row.insertCell(1).innerHTML =json[i].b;
row.insertCell(2).innerHTML =json[i].c;
row.insertCell(3).innerHTML =json[i].d;
row.insertCell(4).innerHTML =json[i].e;
}
此时一个表格就建好了
表格的翻页
js代码如下
- 翻页标签的样式如下规定