使用seajs模块化ajax动态生成表格功能

来源：互联网发布：更改网卡mac地址win10 编辑：程序博客网时间：2024/06/06 02:38

html页面：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body>    <div id="div1"></div></body><script src="js/sea.js"></script><script src="js/seajs-css.js"></script><script>    //配置seajs目标文件    seajs.config({        alias:{            //引入文件因放在同级目录下的js文件夹下            'createT' : 'demo-createTable.js',            'jquery' : 'jquery.min.js'        }    });    //使用接口定义的createTable方法和定义的css样式    seajs.use(['createT','css/createTable.css'], function(createT){        //传入json文件的路径        createT.createTable("data/products.json");    });</script></html>

demo-createTable.js模块文件内容：

/** * Created by 93585 on 2016/10/18. */define(function (require, exports, module) {    exports.createTable = function(url){        var jq = require('jquery');        //使用原生js方法        if(XMLHttpRequest){            //根据传入的url解析获取的数据            var xhr = new XMLHttpRequest();            xhr.open('GET',url,false);            xhr.send();            var d = eval("("+ xhr.responseText +")");            var tb = document.createElement('table');            tb.id = 'jsonTable';           // tb.border = "1";            tb.width = window.innerWidth / 3 + "px";            //取出数据的表头内容            for(var k in d[0]){                var th = document.createElement("th");                var thText = document.createTextNode(k);                th.appendChild(thText);                tb.appendChild(th);            }            //取出数据的表格内容            for (var i in d) {                var tr = document.createElement('tr');                for (var j in d[i]) {                    var td = document.createElement('td');                    td.innerText = d[i][j];                    tr.appendChild(td);                }                tb.appendChild(tr);            }            document.getElementById("div1").appendChild(tb);            //alert(data[0].productid);        }        //使用jquery ajax方法       /* $.ajax({            url: url,            type: "post",            success: function (data) {                var d = eval("("+ data + ")");                var tb = document.createElement('table');                tb.border = "1";                tb.width = window.innerWidth / 3 + "px";                for (var i in d) {                    var tr = document.createElement('tr');                    for (var j in d[i]) {                        var td = document.createElement('td');                        td.innerText = d[i][j];                        tr.appendChild(td);                    }                    tb.appendChild(tr);                }                $("#div1").append(tb);                //alert(data[0].productid);            }        })*/    }});

createTable.css 样式文件内容：

#jsonTable{    text-align: center;    border-spacing:0 ;}body{    text-align: center;}#jsonTable tr td{    border: 1px solid saddlebrown;}#jsonTable th{    border: 1px solid saddlebrown;}#div1 {    width: 500px;    margin: 0 auto;}

其他引入的文件请至官网自行下载！

1 0