生成簡單表格的js封裝
阿新 • • 發佈：2019-01-08
1.效果
2.html中程式碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格外掛演示</title> <script src="./js/Tableone.js"></script> <style type="text/css"> *{ margin:0; padding:0; } #table{ width:1024px; margin:0 auto; } #pageRow a { color:red; margin:0 10px; } </style> </head> <body> <div id ="table"></div> <script type="text/javascript"> /*產生本地資料，替代資料庫*/ var data = [ {name:"第一個",sex:"男",age:"18",qq:1204755158,tel:13895207056,address:"銀川個市興慶區新華街"}, {name:"第二個",sex:"女",age:"20",qq:1103275843,tel:13895207777,address:"吳忠市利通區明珠路"}, {name:"第三個",sex:"男",age:"14",qq:1204055188,tel:13895206666,address:"固原"}, {name:"第四個",sex:"女",age:"33",qq:1255447789,tel:13895205555,address:"中衛"}, {name:"第五個",sex:"男",age:"17",qq:1432232849,tel:13895204444,address:"石嘴山"}, {name:"第一個",sex:"男",age:"18",qq:1204055158,tel:13895207756,address:"銀川個市興慶區新華街"}, {name:"第二個",sex:"女",age:"20",qq:1103275843,tel:13895207777,address:"吳忠市利通區明珠路"}, {name:"第三個",sex:"男",age:"14",qq:1204055188,tel:13895206666,address:"固原"}, {name:"第四個",sex:"女",age:"33",qq:1255447789,tel:13895205555,address:"中衛"}, {name:"第五個",sex:"男",age:"17",qq:1432232849,tel:13895204444,address:"石嘴山"}, {name:"第一個",sex:"男",age:"18",qq:1204055158,tel:13895207756,address:"銀川個市興慶區新華街"}, {name:"第二個",sex:"女",age:"20",qq:1103275843,tel:13895207777,address:"吳忠市利通區明珠路"}, {name:"第三個",sex:"男",age:"14",qq:1204055188,tel:13895206666,address:"固原"}, {name:"第四個",sex:"女",age:"33",qq:1255447789,tel:13895205555,address:"中衛"}, {name:"第五個",sex:"男",age:"17",qq:1432232849,tel:13895204444,address:"石嘴山"}, {name:"第一個",sex:"男",age:"18",qq:1204055158,tel:13895207756,address:"銀川個市興慶區新華街"}, {name:"第二個",sex:"女",age:"20",qq:1103275843,tel:13895207777,address:"吳忠市利通區明珠路"}, {name:"第三個",sex:"男",age:"14",qq:1204055188,tel:13895206666,address:"固原"}, {name:"第四個",sex:"女",age:"33",qq:1255447789,tel:13895205555,address:"中衛"}, {name:"第五個",sex:"男",age:"17",qq:1432232849,tel:13895204444,address:"石嘴山"} ]; /*利用js物件建立表格*/ new Tableone({ tableId : "table", theader : ["姓名","性別","年齡","QQ","Tel","地址"], style : true, page : true, childPage : true, childPageName : "../css3Signin/index.html" , pagenum :3, data : data }) </script> </html>
3.js中的程式碼
!function(global,factory){ global.Tableone = factory(); //標準模式 }(this,function(){ return function(json){ /*定義變數，利用json引數引用html定義的值*/ tableId = json.tableId, theader = json.theader, style = json.style, page = json.page, onePageNum = json.pagenum, childPage = json.childPage, childPageName = json.childPageName, data = json.data; /*獲取table父標籤物件*/ jsonNode = document.getElementById(tableId); /*建立table標籤*//*table-layout:fixed;*/ table = document.createElement("table"); table.className = "lmTable"; table.id = "lmTable"; table.style = "table-layout:fixed;width:100%;text-align:center;border-collapse: collapse;"; jsonNode.appendChild(table); /*建立表頭的tr*/ headerTr = document.createElement("tr"); headerTr.className = "lmTable_header"; headerTr.style = "line-height:50px;border-bottom:3px solid #000;"; table.appendChild(headerTr); /*建立表頭的th並賦值*/ if(theader != null){ theader.forEach(function(content){ headerTh = document.createElement("th"); headerTh.innerText = content; headerTr.appendChild(headerTh); }); } /*展示資料*/ data.forEach(function(row){ /*建立表內容的tr*/ contentTr = document.createElement("tr"); contentTr.className = "contentTr"; contentTr.style = "line-height:30px;border-bottom:1px solid #F2F2F2;"; table.appendChild(contentTr); /*建立表頭的td*/ Object.keys(row).forEach(function(key){ contentTd = document.createElement("td"); contentTd.innerText = row[key]; contentTr.appendChild(contentTd); }); }) if(page == true){ pageRow = document.createElement("div"); pageRow.className = "pageRow"; pageRow.id = "pageRow"; pageRow.style = "text-align: right;"; jsonNode.appendChild(pageRow); goPage(1,onePageNum); } /*設定隔行變色*/ if(style == true){ oneRowOneColor(tableId); } /*滑鼠移入變色*/ moveMouse(tableId); /*彈出子頁面*/ if(childPage == true){ mouseClick(tableId); } }; }) /*設定隔行變色*/ function oneRowOneColor(tableId){ var div=document.getElementById(tableId);//依據id獲取表格 var table = div.getElementsByTagName("table")[0];//獲取表格的第一個tbody元素.getElementsByTagName() 方法可返回帶有指定標籤名的物件的集合 var trs=table.getElementsByTagName("tr");//獲取tbody下所有的tr元素 for(i=1;i<trs.length;i++)//迴圈輸出tr { if(i%2==0)//取模/取餘 { trs[i].style.backgroundColor="#F2F2F2";//改變符合條件的背景色 } } } /*滑鼠移入變色*/ function moveMouse(tableId){ var div=document.getElementById(tableId); var table = div.getElementsByTagName("table")[0]; var trs=table.getElementsByTagName("tr"); var oldColor = ''; /*javascript的style屬性只能獲取內聯樣式， * 對於外部樣式和嵌入式樣式需要用currentStyle屬性。 * 但是，currentStyle在FIrefox和Chrome下不支援， * 需要使用如下相容性程式碼 */ HTMLElement.prototype.__defineGetter__("currentStyle", function () { return this.ownerDocument.defaultView.getComputedStyle(this, null); }); for(var i=1;i<trs.length;i++) { //滑鼠移入變色 trs[i].onmouseover = function(){ oldColor =this.currentStyle.backgroundColor; this.style.background='#C0C0C0'; } //滑鼠移出恢復原來顏色 trs[i].onmouseout=function(){ this.style.background=oldColor; } } } /*彈出子頁面*/ function mouseClick(tableId){ var div=document.getElementById(tableId); var table = div.getElementsByTagName("table")[0]; var trs=table.getElementsByTagName("tr"); /*javascript的style屬性只能獲取內聯樣式， * 對於外部樣式和嵌入式樣式需要用currentStyle屬性。 * 但是，currentStyle在FIrefox和Chrome下不支援， * 需要使用如下相容性程式碼 */ HTMLElement.prototype.__defineGetter__("currentStyle", function () { return this.ownerDocument.defaultView.getComputedStyle(this, null); }); for(var i=1;i<trs.length;i++) { trs[i].onclick = function(){ window.open(childPageName, 'new', 'top=100,left=400,width=500,height=400'); return false; } } } /** * 分頁函式 * pno--頁數 * psize--每頁顯示記錄數 * 分頁部分是從真實資料行開始，因而存在加減某個常數，以確定真正的記錄數 * 純js分頁實質是資料行全部載入，通過是否顯示屬性完成分頁功能 **/ function goPage(pno,psize){ var itable = document.getElementById("lmTable"); var num = itable.rows.length-1;//表格所有行數(所有記錄數) var totalPage = 0;//總頁數 var pageSize = psize;//每頁顯示行數 //總共分幾頁 if(num/pageSize > parseInt(num/pageSize)){ totalPage=parseInt(num/pageSize)+1; }else{ totalPage=parseInt(num/pageSize); } var currentPage = pno;//當前頁數 var startRow = (currentPage - 1) * pageSize+1;//開始顯示的行 31 var endRow = currentPage * pageSize;//結束顯示的行 40 endRow = (endRow > num)? num : endRow; 40 console.log(endRow); //遍歷顯示資料實現分頁 for(var i=1;i<(num+1);i++){ var irow = itable.rows[i]; if(i>=startRow && i<=endRow){ irow.style.display = "table-row"; }else{ irow.style.display = "none"; } } var tempStr = "共"+num+"條記錄 分"+totalPage+"頁 當前第"+currentPage+"頁"; if(currentPage>1){ tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首頁</a>"; tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一頁</a>" }else{ tempStr += "首頁"; tempStr += "<上一頁"; } if(currentPage<totalPage){ tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一頁></a>"; tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾頁</a>"; }else{ tempStr += "下一頁>"; tempStr += "尾頁"; } document.getElementById("pageRow").innerHTML = tempStr; }