Javascript/jquery Create a new summary table based on the table on the page

Mission Background and requirements

According to the existing table on the page, use JS to generate a new statistical table as follows:

Implementation ideas

1. Extract the tabular data to generate a JSON array

2, calculate the total number of tables and create empty tables

3, through the JSON array to dynamically insert data into all tables, set the value/append Row

4, finally configure all the table properties such as Thead,rowspan, etc.

Detailed code

/** * @create: Nelson * @initBPDTable Initialize the contents of the table * @ Call Method $ ("#main_content"). initbpdtable (list);*/$.fn.extend ({//get data from the ListView into a JSON arrayGetjsonarrfromlistview:function(linkcol) {varThis = $ ( This); varKeyarr =NewArray (), Jsonarr=NewArray (); This.find ("Thead th"). each (function() {Keyarr.push ($ ( This). Text (). Trim ());        }); This.find ("Tbody tr"). each (function () {            varJsonobj = {}; $( This). Find ("TD"). each (function(n) {if(n! =Linkcol) {Jsonobj[keyarr[n]]= $( This). Text (). Trim (); }                ElseJsonobj[keyarr[n]]= $( This). Find ("a"). attr ("href"));            });        Jsonarr.push (Jsonobj);        }); returnJsonarr; }, Initbpdtable:function(list) {varThis = $ ( This), $list=$ (list); varKeyarr =NewArray (), Jsonarr=NewArray (), Yeararr=NewArray (); Jsonarr= $list. Getjsonarrfromlistview (3); //Calculate start Year        varStartYear = (function(Jsonarr) {varresult = 2000; $.each (Jsonarr,function(Entryindex, entry) {vartemp = number (entry[' CY ')]); if(Temp >result) {Result=temp;            }            }); returnResult-4;        }) (Jsonarr); //Building Tables(function(Jsonarr, startyear) {varTABLETPL = ' <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> '; varConfigs ={titlearr:NewArray (), col:5, strHTML:"", Targetjsonarr:NewArray (), Tlength:function() {return  This. Titlearr.length;}            }; $.each (Jsonarr,function(Entryindex, entry) { for(vari = 0; I < 5; i++) {                    if(entry[' CY '] = = StartYear +i) {Configs.targetJsonArr.push (entry); vartitle = entry[' Project Type ']; if(Configs.titleArr.length = = 0) {Configs.titleArr.push (title); }                        Else {                            varNewtitleflag =true;  for(varj = 0; J < Configs.titleArr.length; J + +) {                                if(Configs.titlearr[j] = =title) {Newtitleflag=false;  Break; }                            }                            if(Newtitleflag) {Configs.titleArr.push (title);            }                        }                    }                }            }); //generate an empty table             for(vari = 0; I < configs.tlength (); i++) {configs.strhtml+ = Tabletpl.replace ("{tabletitle}", Configs.titlearr[i]);            } this.html (configs.strhtml); //Inserting Data            varJarr =Configs.targetjsonarr; $.each (Jarr,function(Entryindex, entry) {vartitle = entry[' Project Type '], Cy= entry[' CY '], link= entry[' Project Link '], name= entry[' Project Name '];  for(vari = 0; I < 5; i++) {                    if(cy = = StartYear +i) { for(varj = 0; J < Configs.tlength (); J + +) {                            if(title = =Configs.titlearr[j]) {                                varNeedappend =true, Isoddrow; This.find (". Itm_table:eq (" + j + ")"). Find ("Tbody>tr"). each (function(n) {varobj = $ ( 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) {varODDTPL = ' <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=NewRegExp ("{\\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 + ' + Lt;/a> '). Replace (Reg, ""));                }                                }                            }                        }                    }            }            }); //Initialize year displayThis.find (". Itm_table:eq (0)"). Find ("Thead"). html (' <tr> ' + ' <th></th> ' + ' & Lt;th><span class= "cy" >CY2014</span></th> ' +                ' <th><span class= ' cy ' >CY2015</span></th> '                + ' <th><span class= "Cy" >CY2016</span></th> '                + ' <th><span class= "Cy" >CY2017</span></th> '                + ' <th><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]);            }); //Initialize the rowspan of a rowThis.find (". Itm_table"). each (function () {                varSelf = $ ( This); varLen = Self.find ("Tbody>tr"). length; Self.find ("Tbody>tr:first"). Find ("Td:eq (0)"). attr ("rowspan", Len);        });    }) (Jsonarr, startyear); }});

Javascript/jquery Create a new summary table based on the table on the page