Javascript/jQuery根據頁面上表格建立新匯總表格

標籤：

任務背景及需求

按頁面上的現成表格，用js產生新的統計表格如下：

實現思路

１，把表格式資料抽取出來產生json數組

２，計算表格總數並建立空表格

３，曆遍json數組把資料動態插入所有的表格，設值/append Row

４，最後配置好所有表格的屬性如thead,rowspan等

詳細代碼

/** * @create: nelson * @initBPDTable    初始化表格內容 * @調用方式       $("#main_content").initBPDTable(list); */$.fn.extend({    //擷取listView的資料轉化為json數組    getJsonArrFromListView: function (linkCol) {        var This = $(this);        var keyArr = new Array(),        jsonArr = new Array();        This.find("thead th").each(function () {            keyArr.push($(this).text().trim());        });        This.find("tbody tr").each(function () {            var jsonObj = {};            $(this).find("td").each(function (n) {                if (n != linkCol) {                    jsonObj[keyArr[n]] = $(this).text().trim();                }                else                    jsonObj[keyArr[n]] = $(this).find("a").attr("href");            });            jsonArr.push(jsonObj);        });        return jsonArr;    },    initBPDTable: function (list) {        var This = $(this),            $list = $(list);        var keyArr = new Array(),            jsonArr = new Array(),            yearArr = new Array();        jsonArr = $list.getJsonArrFromListView(3);        //計算起始年份        var startYear = (function (jsonArr) {            var result = 2000;            $.each(jsonArr, function (entryIndex, entry) {                var temp = Number(entry[‘CY‘]);                if (temp > result) {                    result = temp;                }            });            return result - 4;        })(jsonArr);        //構建表格        (function (jsonArr, startYear) {            var tableTpl = ‘<table class="itm_table"><thead><tr><th></th><th></th><th></th><th></th><th></th><th></th></tr></thead><tbody><tr class="odd"><td rowspan="1">{tableTitle}</td><td></td><td></td><td></td><td></td><td></td></tr></tbody></table>‘;            var configs = {                titleArr: new Array(),                col: 5,                strHtml: "",                targetJsonArr: new Array(),                tLength: function () { return this.titleArr.length; }            };            $.each(jsonArr, function (entryIndex, entry) {                for (var i = 0; i < 5; i++) {                    if (entry[‘CY‘] == startYear + i) {                        configs.targetJsonArr.push(entry);                        var title = entry[‘Project Type‘];                        if (configs.titleArr.length == 0) {                            configs.titleArr.push(title);                        }                        else {                            var newTitleFlag = true;                            for (var j = 0; j < configs.titleArr.length; j++) {                                if (configs.titleArr[j] == title) {                                    newTitleFlag = false;                                    break;                                }                            }                            if (newTitleFlag) {                                configs.titleArr.push(title);                            }                        }                    }                }            });            //產生空表格            for (var i = 0; i < configs.tLength(); i++) {                configs.strHtml += tableTpl.replace("{tableTitle}", configs.titleArr[i]);            }            This.html(configs.strHtml);            //插入資料            var jArr = configs.targetJsonArr;            $.each(jArr, function (entryIndex, entry) {                var title = entry[‘Project Type‘],                    cy = entry[‘CY‘],                    link = entry[‘Project Link‘],                    name = entry[‘Project Name‘];                for (var i = 0; i < 5; i++) {                    if (cy == startYear + i) {                        for (var j = 0; j < configs.tLength(); j++) {                            if (title == configs.titleArr[j]) {                                var needAppend = true,                                    isOddRow;                                This.find(".itm_table:eq(" + j + ")").find("tbody>tr").each(function (n) {                                    var obj = $(this),                                        self = (n == 0) ? obj.find("td:eq(" + (i + 1) + ")") : obj.find("td:eq(" + i + ")");                                    isOddRow = (obj.attr("class") == "odd");                                    if (self.html() == "") {                                        self.html(‘<a href="‘ + link + ‘">‘ + name + ‘</a>‘);                                        needAppend = false;                                        return false;                                    }                                });                                if (needAppend) {                                    var oddTpl = ‘<tr class="odd"><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td><td>{4}</td></tr>‘,                                        evenTpl = ‘<tr class="even"><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td><td>{4}</td></tr>‘,                                        reg = new RegExp("{\\d{1}}", "g");                                    if (isOddRow) {                                        This.find(".itm_table:eq(" + j + ")").find("tbody").append(evenTpl.replace(‘{‘ + i + ‘}‘, ‘<a href="‘ + link + ‘">‘ + name + ‘</a>‘).replace(reg, ""));                                    }                                    else {                                        This.find(".itm_table:eq(" + j + ")").find("tbody").append(oddTpl.replace(‘{‘ + i + ‘}‘, ‘<a href="‘ + link + ‘">‘ + name + ‘</a>‘).replace(reg, ""));                                    }                                }                            }                        }                    }                }            });            //初始化年份顯示            This.find(".itm_table:eq(0)").find("thead").html(‘<tr>‘                + ‘<th></th>‘                + ‘<th><img src="/images/arrow_red.png" /><span class="cy">CY2014</span></th>‘                + ‘<th><img src="/images/arrow_green.png" /><span class="cy">CY2015</span></th>‘                + ‘<th><img src="/images/arrow_purple.png" /><span class="cy">CY2016</span></th>‘                + ‘<th><img src="/images/arrow_blue.png" /><span class="cy">CY2017</span></th>‘                + ‘<th><img src="/images/arrow_orange.png" /><span class="cy">CY2018</span></th>‘                + ‘</tr>‘);            This.find(".itm_table:eq(0)").find(".cy").each(function (n) {                yearArr.push((startYear + n).toString());                $(this).text("CY" + yearArr[n]);            });            //初始化行的rowspan            This.find(".itm_table").each(function () {                var self = $(this);                var len = self.find("tbody>tr").length;                self.find("tbody>tr:first").find("td:eq(0)").attr("rowspan", len);            });        })(jsonArr, startYear);    }});

Javascript/jQuery根據頁面上表格建立新匯總表格