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);



    }

});