[聲明: 1.博文原創 未經同意轉載必究，歡迎相互交流]
[聲明: 2.博主未知情況下轉載，需顯著處注明博文來源]
[聲明: 3.謝謝尊重勞動成果，謝謝理解與配合~]
一、背景
在生產過程和生活中，遇到好幾回需要使用Table的Dom，比如:
1.增添一行表格方便用戶交互式填寫表單，
2.刪除一行表格，
3.獲取某一行指定幾列的單元格數據並把該數據裝載到另一處地方(如：模態框等)
4.獲取表格內的某一行指定某些列的行和最大值，最小值，平均值以及對應的下標和整行數據等(為了查詢許多所考研學校的錄取分數線及其平均分和對應考生信息等，數據太多，實在不想計算！！！！！)
由此，我迫切地需要一個系統的操作Table Dom的工具；(當然，jQuery強大功能以及能夠實現上述諸多需求，但一方面，為了提高個人js這方面的能力，另一方面，我確實想實現除了jquery實現功能之外，還沒有實現的我需要的一些(個性化,細致化的)功能)，所以TableDom的想法產生了。
二、源碼:(當前僅僅實現了Table獲取指定某一些行內某一些列的數據，並取得其最大值和最小值，以及對應的行的數據(輸出在控制台)：對應實現的需求是上述需求的第四點)
好了，直接粘上源碼吧！
/** * @Name TableDom.js * * @Content Make developer operate js's table to become easier, which is the aim. * @Author Johnny Zen * @E-mail johnnyztsd@gmail.com * @Date 2017-08-02 15:49 * @Version 0.0.1 * */ /** * @introduce functions * * @function TableDom.prototype.OPTION_GETTABLEDATA * @function getTableData * @function getTableData.init * @function getTableData.getTableNode * @function getTableData.getTrNodes * @function getTableData.checkArguments * @function getTableData.checkTdsIndexs * @function getTableData.getRowMaxMinSumData_Line ***** * @function getTableData.showRowsAllByIndex *** * @function getTableData.printLineData * @function getTableData.showOptions * */ var TableDom = function() {}; /** * @name OPTION_GETTABLEDATA(getTableData Option) * * @function 獲取tableData的默認配置項 * * @param [可選]tableId 表格ID * @param [可選]tableIndex 目標table所處的位置在整個文檔里table的第i個(以下標0開始) * @param tds_indexs 按照數組索引號，升序排序(以0下標為索引起始下標) * @param tds_isUseful 需要采用的數據項的列號對應的真值，與tds_indexs一一對應 * @param [可選]startIndex 開始操縱的table內的起始行下標 * @param [可選]endIndex 最終操縱的table內的末尾行下標 * @param exe 需要執行的函數體 * * @notice tableId與tableIndex必填一項 * @notice 在table內可能存在某些tr內不規整表格項時(例如：td合並或者異常不存在): * 此時，最好手動添加配置項屬性startIndex和endIndex */ //ECNU default option TableDom.prototype.OPTION_GETTABLEDATA = { tableId: "table", tableIndex: 2, tds_indexs: [5, 6, 7, 8], tds_isUseful: [true, true, true, true], startIndex:3, endIndex:40, exe: ["getRowMaxMinSumData_Line"] } TableDom.prototype.getTableData = function(option) { //屬性 var tableNode = null; var trNodes = null; var trNode_cur = null; var trIndex_cur = 0; var tdsNodes_cur = null; var MaxRowSum = -1048576; var MinRowSum = 1048576; var MaxRowSumIndex = -1;//最大行和值對應table內的下標號 var MinRowSumIndex = -1;//最小行和值對應table內的下標號 //方法 /** ↓ 非功能(函數)區 ↓ **/ /** ↓ not function area ↓ **/ //init function 初始化函數 var init = function() { //檢驗參數 checkArguments(); //初始化重要DOM結點 getTableNode(option.tableId, option.tableIndex); getTrNodes(tableNode); //檢驗單元格列號數組的合法性 checkTdsIndexs(option.tds_indexs); }; //get table element node :獲取table節點 var getTableNode = function(tableId, tableIndex) { //console.log('test:getTableNode ' + tableId); //console.log('test:getTableNode ' + tableIndex); if (tableId == undefined && tableIndex == undefined) throw new Error("參數不齊全！tableId,tableIndex二者必選其一！"); if (tableId) tableNode = document.getElementById(tableId); if (( (tableIndex != null) && (typeof(tableIndex) != 'number')) || (tableNode == null)) { tableNode = document.getElementsByTagName("table")[tableIndex]; } console.log('test:getTableNode ' + tableNode); if (tableNode == null) { throw new Error("table is not found！"); } }; //get tr element nodes: 獲取tr行節點 var getTrNodes = function(tableNode) { this.tableNode = tableNode; trNodes = this.tableNode.getElementsByTagName("tr"); }; //check arguments : 檢測參數 var checkArguments = function() { if ((typeof(option) != 'object') || ((option instanceof(TableDom.prototype.OPTION_GETTABLEDATA.constructor)) != true)) { console.log('++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++'); console.log('+ OPTION ERROR INFORMATION +'); console.log('++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++'); console.log(' typeof(option): ' + typeof(option)); console.log(' (option): ' + (option)); console.log(' option instanceof(TableDom.prototype.OPTION_GETTABLEDATA.constructor): ' + (option instanceof(TableDom.prototype.OPTION_GETTABLEDATA.constructor))); console.log('++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++'); //設置默認值 option = TableDom.prototype.OPTION_GETTABLEDATA; return false; } return true; }; //check tr's indexs's sort:檢測trIndexs順序是否升序 var checkTdsIndexs = function(tds_indexs) { var curIndex = -1; for (var i = 0; i < tds_indexs.length; i++) { curIndex = i; for (var j = i; j < tds_indexs.length; j++) { if (curIndex >= tds_indexs[j]) { throw new Error("列數組索引號必須升序，且獨一無二！"); return false; } } } return true; }; /** ↓ 功能(函數)區 ↓ **/ /** ↓ function area ↓ **/ /** * * 獲取並顯示行數據/行和最大(小)值 * * 操作范圍：行 * * @param tds_indexs 單元格所在列的下標數組 * @param isShowEveryRowData 在執行過程中，是否顯示每一行(每一個單元格及其行和)的數據（true/false） * @param tds_isUseful 配置哪些項目需要與不需要計算 * @param ［可選］startIndex 左開右閉區間(以下標0開始) * @param ［可選］endIndex 左開右閉區間(以下標0開始) * */ var getRowMaxMinSumData_Line = function(tds_indexs, isShowEveryRowData, tds_isUseful, startIndex, endIndex) { var sum_curTr = 0; //計算當前行和：初始化 10 exp 20 var startIdx = startIndex ? startIndex : 0; var endIdx = endIndex ? endIndex : trNodes.length; //防止超界 if(startIndex < 0) startIndex = 0; if(endIndex > trNodes.length) endIndex = trNodes.length; var value_curTd;//當前單元格的數值 for (var i = startIdx; i < endIdx; i++) { //掃描行 sum_curTr = 0; trNode_cur = trNodes[i]; trIndex_cur = i; tdsNodes_cur == null; tdsNodes_cur = trNode_cur.getElementsByTagName("td"); if(tdsNodes_cur == null){ throw new Error("第" + (i + 1) + "列不存在td單元格！"); } for (var j = tds_indexs[0], indexCount = 0; indexCount < tds_indexs.length; indexCount++, j = tds_indexs[indexCount]) { //掃描列 if (tds_isUseful[indexCount] == true){ value_curTd = parseFloat(tdsNodes_cur[j].innerText.trim()); if(isNaN(value_curTd)){//處理異常情況(如innerText為數值等) value_curTd = 0; } sum_curTr += value_curTd; } } if (isShowEveryRowData) { console.log('test:tdsNodes_cur: ' + tdsNodes_cur); printLineData("第 " + (i + 1) + " 行：[Sum:" + sum_curTr + "] ", tdsNodes_cur, tds_isUseful); } if (MaxRowSum < sum_curTr) { MaxRowSum = sum_curTr; MaxRowSumIndex = i; } if (MinRowSum > sum_curTr) { MinRowSum = sum_curTr; MinRowSumIndex = i; } } //控制台輸出信息 console.log('getRowMaxMinSumData_Line:MaxRowSum ' + MaxRowSum + ' ' + MaxRowSumIndex); console.log('getRowMaxMinSumData_Line:MinRowSum ' + MinRowSum + ' ' + MinRowSumIndex); showRowsAllByIndex("MaxRowSum", MaxRowSumIndex, trNodes[MaxRowSumIndex]); showRowsAllByIndex("MinRowSum", MinRowSumIndex, trNodes[MinRowSumIndex]); return { MaxRowSum: MaxRowSum, MinRowSum: MinRowSum, MaxRowSum_RowNumber: MaxRowSumIndex + 1, MinRowSum_RowNumber: MinRowSumIndex + 1 } }; //指定任意一行顯示其所有數據 var showRowsAllByIndex = function(title,index,rowNode){ // console.log('test:showRowsByIndex title:' + title); // console.log('test:showRowsByIndex rowNode:' + rowNode); // console.log('test:showRowsByIndex index:' + index); //參數合法性檢測 if(arguments.length != 3){ throw new Error("參數長度不合法！"); } if(typeof(index) != 'number'){ throw new Error("index必須屬於number類型！"); } if(rowNode.nodeType != 1){ throw new Error("rowNode參數不屬於Element元素！"); } var string = title + " 第 " + (index + 1) + " 行："; var tds = null; tds = rowNode.getElementsByTagName("td"); if(tds == null){ throw new Error("rowNode中不存在td單元格！"); } for(var i = 0; i < tds.length; i++){ string += tds[i].innerText + " "; } console.log('showRowsByIndex: ' + string.split("\n"));//去掉換行符的影響 } var printLineData = function(title, tds, tds_isUseful) { var string = "" + title + ": "; //console.log('test:printLineData ' + tds_isUseful); for (var i = 0; i < tds.length; i++) { if (tds_isUseful[i] == true) { string += tds[i].innerText + " "; } } console.log(string); }; var showOptions = function(option) { console.log('++++++++++++++++++++++++++++++ showOptions start +++++++++++++++++++++++++++++++++'); for (var item in option) { console.log(item + ":" + option[item]); } console.log('++++++++++++++++++++++++++++++++++++ end +++++++++++++++++++++++++++++++++++++++++'); }; (function() {//作為調度器與執行器 init(); //初始化 showOptions(option);//顯示配置項信息 if(option.exe.indexOf("getRowMaxMinSumData_Line") != -1){ var obj = getRowMaxMinSumData_Line(option["tds_indexs"], false, option.tds_isUseful,option.startIndex,option.endIndex); console.log('test:obj ' + option.tds_isUseful); console.log('test:obj ' + obj.MaxRowSum); console.log('test:obj ' + obj.MinRowSum); console.log('test:obj ' + obj.MaxRowSum_RowNumber); console.log('test:obj ' + obj.MinRowSum_RowNumber); } })(); }
三、測試
var std = new TableDom(); //華東師范大學研究生招生數據網址:https://yjszs.ecnu.edu.cn/system/sslqmd_list.asp?yxid=160 var option = { tableIndex: 2, tds_indexs: [5, 6, 7, 8], tds_isUseful: [true, true, true, true], startIndex: 3, endIndex: 40, exe: ["getRowMaxMinSumData_Line"] } //華南理工大學高考招生數據網址:http://202.38.194.145/Bachelor/Admission/1bl541elndfdu.xhtml // var option = {//對應理科段 // tableIndex: 0, // tds_indexs: [2, 3, 4], // tds_isUseful: [true, true, true], // exe: ["getRowMaxMinSumData_Line"], // startIndex:1, // endIndex:92, // } std.getTableData(option);
四、效果
[聲明: 1.博文原創, 未經同意轉載必究，歡迎相互交流]
[聲明: 2.博主未知情況下轉載，需顯著處注明博文來源]
[聲明: 3.謝謝尊重勞動成果，謝謝理解與配合~]