根据json数据创建表格的方法并能够控制表格翻页

表格的头部已经写好

//根据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代码如下

  
  • 翻页标签的样式如下规定

你可能感兴趣的:(根据json数据创建表格的方法并能够控制表格翻页)