js操作table元素,表格的行列新增、刪除匯集


/************ TableTool.js ****************************************************************************************************************** 
    ************************************************************** 快速索引 *************************************************************** 
    表格行、列刪除 
    【一】、 doTableRowDelete 說明:默認根據當前事件指向的對象,向上尋找TR,進行刪除(可選參數:表格對象;刪除的行的行號,按升序方式以逗號分割,如2,3,5;向上遍歷TD幾次,默認為1次) 
     
    合並表格 ****** 
    【一】、  conbainTableRow  說明:縱向單元格的內容相同的合並,傳入表格對象,需要合並的列,(可選的參數,從第幾行開始); 
    【二】、  combineCell  說明:橫向單元格合並,傳入單元格內一對象,(可選的參數,合並幾個單元格<向右>;是否保留原單元格的值); 
         
    單元格與行的移動 ****** 
    【一】、  moveUp  說明:進行上移,(可選參數,最上移動到第幾行,默認為第零行;需要移動的行或者td對象或者td內的子對象,默認獲取當前事件指向的行) 
    【二】、  moveDown  說明:進行下移,(可選參數,最低移動到倒數第幾行,默認為倒數第零行;需要移動的行或者td對象或者td內的子對象,默認獲取當前事件指向的行) 
    【三】、  moveCell  說明:行交換,表格對象、交換的行的行號  
     
    賦值單元格樣式 ****** 
    【一】、 cloneStyle  說明:將模板單元格的樣式COPY到目標單元格上,模板單元格,要修正樣式的單元格     
     
    新增行、列 ******  
    【一】、  insertTableRow  說明:新增行,表格對象,添加行的內容的數組(可選參數,每個單元格的colSpan的數組參數,默認取前一行的屬性; 添加到的行的行號,默認是最后一行) 
    【二】、  insertTableCol  說明:新增列,表格對象,添加行的內容的數組(可選參數,每個單元格的rowSpan的數組參數,默認取前一列的屬性;添加到的列的列號,默認是最后一列) 
     
    獲取表格中一行的元素 ****** 
    【一】、  doGetRowObj  說明: 獲取表格中行內的元素 ,表格對象,行號,(可選參數,是否copy對象,默認為false;是否獲取單元格對象,默認false) 
     
    其他驗證與參數獲取 ****** 
    【一】、  doFetchBaseCols   說明:獲取列號在表格內行中的實際位置,表格對象,列號;返回一個數組,記錄每行中指定的單元格的cellIndex 
    【二】、  doFetchEffectCells  說明:獲取插入當前行,被影響到rowSpan屬性的單元格集合 
    【三】、  calculateSpanWidth 說明:計算Span的寬度,根據當前span外的單元格的寬度,(可選參數:容器對象,容器對象為空時,取當前document,即遍歷頁面上所有的Span對象) 
     
    ******************************************************************************************************************************************* 
    ***********************************************************************************************************************************************/ 
      
    /** 
    * 刪除表格的行 
    * 
    * tdCount 根據當前event事件向上追溯TD對象幾次,默認為1次  
    *  
    * 說明:event事件需要附着在將要刪除的TD內部,且不能有多重TD的嵌套;否則需要指定嵌套幾層TD對象 
    */ 
    function doTableRowDelete(){  
        var tablObj = arguments[0];  
        var trIndexs = arguments[1];  
        var tdCount = arguments[2]==undefined?1:parseFloat(arguments[2]);  
        if(trIndexs==undefined){  
            tdCount = tdCount-1;   
            var tdObj = event.srcElement;  
            var trObj,tableObj;  
            while(tdCount > 0){  
                tdCount--;  
                while(tdObj.tagName != 'TD'){  
                    tdObj = tdObj.parentNode;  
                }  
                tdObj = tdObj.parentNode;  
            }  
            while(tdObj.tagName != 'TD'){  
                tdObj = tdObj.parentNode;  
            }  
            trObj = tdObj.parentNode;  
            tableObj = trObj.parentNode;  
            if(tableObj.tagName != 'TABLE'){  
                tableObj = tableObj.parentNode;  
            }  
            var cellIndex = tdObj.cellIndex;  
            var rowIndex = trObj.rowIndex;  
            var effectCells = doFetchEffectCells(tableObj,rowIndex);  
            for(var i=0;i<effectCells.length;i++){  
                effectCells[i].rowSpan = effectCells[i].rowSpan - 1;  
            }  
            tableObj.deleteRow(rowIndex);  
        }else{  
            var delIndexArr = trIndexs.split(",");  
            for(var i=delIndexArr.length-1;i>-1;i--){  
                tablObj.deleteRow(delIndexArr[i]);  
            }  
        }  
        isDeleteFlag = true;  
        return isDeleteFlag;  
    }  
      
    /** 
    * 刪除表格的列 
    * 
    * tdCount 根據當前event事件向上追溯TD對象幾次,默認為1次  
    *  
    * 說明:event事件需要附着在將要刪除的TD內部,且不能有多重TD的嵌套;否則需要指定嵌套幾層TD對象 
    */ 
    function doTableColDelete(){  
        var isDeleteFlag = false;  
        var tdCount = arguments[0]==undefined?1:parseFloat(arguments[0]);  
        var tdObj = event.srcElement;  
        while(tdCount!=0){  
            tdCount--;  
            while(tdObj.tagName != 'TD'){  
                tdObj = tdObj.parentNode;  
            }  
        }  
        var trObj = tdObj.parentNode;  
        var tableObj = trObj.parentNode;  
        var cellIndex = tdObj.cellIndex;  
        var rowIndex = trObj.rowIndex;  
        tableObj.deleteRow(rowIndex);  
        isDeleteFlag = true;  
        return isDeleteFlag;  
    }  
      
    /** 
    * 根據Span外最臨近的TD的寬度計算重置當前Span的寬度 
    * 
    * obj 可以是頁面上一個容器對象,TR、TD、TABLE,此項為空,則會遍歷頁面上所有的Span對象 
    */ 
    function calculateSpanWidth(){  
        var obj = arguments[0];   
        var spanObjs;  
        if(obj!=undefined){   
            spanObjs = obj.getElementsByTagName('span');  
        }else{  
            spanObjs = document.getElementsByTagName('span');  
        }  
        for(var i=0;i<spanObjs.length;i++){  
            var tdObj = spanObjs[i].parentNode;  
            while(tdObj.tagName!='TD'&&typeof(tdObj)=='Object'){  
                tdObj = tdObj.parentNode;  
            }  
            if(tdObj.tagName=='TD'){  
                var offsetWidth = tdObj.offsetWidth;  
                spanObjs[i].style.width = offsetWidth-5;  
            }   
        }  
    }  
      
    /** 
     * 合並表格中縱向相鄰單元格的內容相同的項 
     * 
     * tableObj 表格對象(必須) 
     * combainCols 需要合並的列 (格式:從小到大,連續的用-分割,獨立的用逗號; 例如:1-5,7,9) 
     * beginRowIndex 從第幾行開始合並, 默認從第零行開始 
     */ 
    function conbainTableRow(){  
        var tableObj = arguments[0];  
        var combainCols = arguments[1];  
        var beginRowIndex = arguments[2]==undefined?0:arguments[2];  
          
        //var beginColIndex = arguments[3]==undefined?0:arguments[3];  
        var colsArr = combainCols.split(",");  
        var cols = new Array();  
        var index = 0;  
        for(var i=0;i<colsArr.length;i++){  
            var indexChar = colsArr[i].indexOf("-");  
            if(indexChar!=-1){  
                var beginIndex = parseInt(colsArr[i].substring(0,indexChar));  
                var endIndex = parseInt(colsArr[i].substring(indexChar+1));  
                for(var j=beginIndex;j<=endIndex;j++){  
                    cols[index++] = j;  
                }  
            }  
            else{  
                cols[index++] = parseInt(colsArr[i]);  
            }  
        }   
        if(tableObj.rows.length>beginRowIndex){  
            var modelArr = new Array();  
            for(var i=beginRowIndex;i<tableObj.rows.length;i++){  
                var row = tableObj.rows[i];  
                for(var k=cols.length-1;k>=0;k--){  
                    var j = cols[k];  
                    if(modelArr[j]==undefined){  
                        modelArr[j] = row.cells[j];  
                    }else{  
                        if(row.cells[j].outerText == modelArr[j].outerText){  
                            modelArr[j].rowSpan = modelArr[j].rowSpan + 1;  
                            row.deleteCell(j);  
                        }else{  
                            modelArr[j] = row.cells[j];  
                        }  
                    }  
                }  
            }  
        }  
    }  
      
    /** 
     * 行上移 
     * 
     *minRowIndex 向上移動到的最小行號,默認時零 
     * Elm 可以缺省,如果當前需要移動的行與激發本函數的位置有比較復雜的關系時,需要自行指名tr對象或者當前行的td對象傳入 
     *  
     * 返回,移動成功返回true,如果當前時第minRowIndex行則返回false 
     */ 
    function moveUp(){  
        //傳入的對象  
        var minRowIndex = arguments[0]==undefined?0:arguments[0];  
        //傳入的對象  
        var Elm = arguments[1];  
        //返回值  
        var isSuccess = false;  
        //表格對象  
        var myTable;  
        if(Elm==undefined){  
            Elm=event.srcElement;  
        }  
        while(Elm&&Elm.tagName!="TR"){  
            Elm=Elm.parentElement;     
        }  
        //當前行號  
        var x = Elm.rowIndex;  
        //獲取表格對象  
        myTable = Elm.parentElement;  
        if(myTable.tagName!='TABLE'){  
            myTable = myTable.parentNode;  
        }  
        //移到上一行  
        if (x > minRowIndex){  
            moveCell(myTable, x, x-1);  
            isSuccess = true;  
        }  
        return isSuccess;  
    }  
 
   /** 
     * 行下移 
     * 
     *minRowIndex 向下移動到表格的倒數幾行,默認是零,即表格的最后一行 
     * Elm 可以缺省,如果當前需要移動的行與激發本函數的位置有比較復雜的關系時,需要自行指名tr對象或者當前行的td對象傳入 
     *  
     * 返回,移動成功返回true,如果當前時最后一行則返回false 
     */ 
    function moveDown(){  
            //傳入的對象  
            var minRowIndex = arguments[0]==undefined?0:arguments[0];  
            //傳入的對象  
            var Elm = arguments[1];  
            //返回值  
            var isSuccess = false;  
            //表格對象  
            var myTable;  
            if(Elm==undefined){  
                Elm=event.srcElement;  
            }  
            while(Elm&&Elm.tagName!="TR"){  
                Elm=Elm.parentElement;     
            }  
            //當前行號  
            var x = Elm.rowIndex;  
            //獲取表格對象  
            myTable = Elm.parentElement;  
            if(myTable.tagName!='TABLE'){  
                myTable = myTable.parentNode;  
            }  
            var tableLength = myTable.rows.length;  
            //移到下一行  
            if (x < tableLength-minRowIndex-1){  
                moveCell(myTable, x, x+1);  
                isSuccess = true;  
            }  
            return isSuccess;  
    }  
 
    /** 
     * 行交換,處理了checkbox丟值的問題 
     * 
     *myTable 表格對象 
     * a 行號 
     * b 行號 
     */ 
    function moveCell(myTable, a, b){  
          var e2 = myTable.rows[a].all.tags("input");  
          var e3 = myTable.rows[b].all.tags("input");  
          var arr = [];  
          //遍歷a行的所有input控件  
          for(i = 0; i < e2.length; i++) {  
              if(e2[i].type == "checkbox"){  
                  //對所有checkbox控件添加到數組中  
                  arr.push(e2[i], e2[i].checked);  
              }  
          }  
          //遍歷b行的所有input控件  
          for(i = 0; i < e3.length; i++) {  
              if(e3[i].type == "checkbox"){  
                  //對所有checkbox控件添加到數組中  
                  arr.push(e3[i], e3[i].checked);  
              }  
          }  
          myTable.moveRow(a, b);  
          //對數組中所有元素獲得對象並對引用的對象賦原值  
          while(arr.length > 0){  
              arr.shift().checked = arr.shift();  
          }  
    }  
      
    /** 
    *替換單元格的樣式為傳入的單元格樣式 
    * 
    *tdObj 模板單元格 
    *targetTdObj 目標替換的單元格 
    * 
    */ 
    function cloneStyle(){  
        //單元格中對象  
        var tdObj = arguments[0];  
        //合並列數  
        var targetTdObj = arguments[1];  
        //克隆傳入的對象  
        var tempObj = tdObj.cloneNode(false);  
        //克隆目標對象  
        var targetHtml = targetTdObj.innerHTML;  
        //橫向合並的個數  
        var colspan = targetTdObj.colSpan;  
        //縱向合並的個數  
        var rowspan = targetTdObj.rowSpan;  
        //寬度  
        var width = targetTdObj.width;  
          
        //行對象  
        var  rowObj = tdObj.parentNode;  
        //替換當前單元格  
        rowObj.replaceChild(tempObj, targetTdObj);  
        //for(var i=0;i<targetObj.childNodes.length;i++){  
        //  tempObj.appendChild(targetObj.childNodes[i]);  
        //}  
        tempObj.innerHTML = targetHtml;  
        tempObj.colSpan = colspan;  
        tempObj.rowSpan = rowspan;  
        tempObj.width = width;  
    }  
 
    /** 
     * 合並單元格,TODO:行合並暫未實現 
     * 
     * obj 單元格中對象 
     * colspan 合並列數 
     * rowspan 合並的行數 
      *keepFlag 是否保留每個單元格的值 
     */ 
    function combineCell(){  
        //單元格中對象  
        var obj = arguments[0];  
        //合並列數  
        var colspan = arguments[1]==undefined?1:arguments[1];  
        //合並的行數  
        var rowspan = arguments[2]==undefined?1:arguments[2];  
        //是否保留每個單元格的值  
        var keepFlag = arguments[3]==undefined?false:arguments[3];  
 
        var elementObjs = new Array();  
        var tdObj = obj.tagName!='TD'?obj.parentNode:obj;  
        var trObj = tdObj.parentNode;  
        var tableObj = trObj.parentNode;  
        if(tableObj.tagName!='TABLE'){  
            tableObj = tableObj.parentNode;  
        }  
        //當前單元格的原來的格式  
        var colIndex = tdObj.cellIndex;  
        var rowIndex = trObj.rowIndex;  
        //  
        //var colIndexs;  
        //if(rowspan>1){  
        //  colIndexs = doFetchBaseCols(tableObj,doGetColIndex(obj));  
        //}  
        for(var i=colspan-1;i>0;i--){  
            //alert("i+colIndex="+(i+colIndex));  
            //alert("trObj.cells.length="+trObj.cells.length);  
            var tempObj = trObj.cells[i+colIndex].cloneNode(true);  
            elementObjs[elementObjs.length] = tempObj;  
            trObj.removeChild(trObj.cells[i+colIndex]);  
        }  
        tdObj.colSpan = tdObj.colSpan + colspan - 1;  
        //alert("keepFlag="+keepFlag);  
        //alert("elementObjs.length="+elementObjs.length);  
        //添加每個單元格的對象  
        if(keepFlag&&elementObjs.length>0){  
            for(var i=elementObjs.length-1;i>-1;i--){  
                var tempObj = elementObjs[i];  
                for(var j=0;j<tempObj.childNodes.length;j++){  
                    tdObj.appendChild(tempObj.childNodes[j]);  
                }     
            }  
              
        }  
    }  
 
    /** 
     * 對表格新增一行 
     * 
     * tableObj 被新增的表格對象 
     * htmlArr添加內容對象數組, 
     * htmlCols 每個td的元素對應的colSpan參數,為空則獲取之前的Tr信息,否則根據htmlCols生成 
     * rowIndex 行號 默認方式在最后一行新增行,從零開始 
     * 
     *返回新增成功、失敗 
     */ 
    function insertTableRow(){  
        //表格對象  
        var tableObj = arguments[0];  
        //增加對象集  
        var htmlArr = arguments[1];  
        //元素的TD的colSpan屬性  
        var htmlCols = arguments[2]==undefined?new Array():arguments[2];  
        //增加的行位置  
        var rowIndex = arguments[3];  
        //根據當前table表的行數,進行參數的處理  
        if(tableObj==undefined||tableObj.rows==undefined){  
            rowIndex = 0;  
        }else if(rowIndex==undefined||rowIndex>tableObj.rows.length){  
            rowIndex = tableObj.rows.length;  
        }  
        //新增行成功標志,默認失敗  
        var isSuccess = doCheckPara(tableObj,htmlArr,htmlCols,rowIndex);  
        if(isSuccess){  
            //新增行  
            //alert("tableObj="+tableObj.rows.length+"\nrowIndex="+rowIndex);  
            //alert("htmlArr.length="+htmlArr.length);  
            var newTrObj = tableObj.insertRow(rowIndex);  
            for(var i=0;i<htmlArr.length;i++){  
                var cellObj = newTrObj.insertCell(i);   
                //判斷傳入參數不為空,添加對象  
                if(htmlArr[i]!=undefined && htmlArr[i]!=null){  
                    if(htmlArr[i].constructor == Array){  
                        var childHtmlArr = htmlArr[i];  
                        for(var k=0;k<childHtmlArr.length;k++){  
                            if(typeof(childHtmlArr[k])=='object'){  
                                cellObj.appendChild(childHtmlArr[k]);  
                            }  
                        }  
                    }else{  
                        if(typeof(htmlArr[i])=='object'){  
                            cellObj.appendChild(htmlArr[i]);  
                        }else{  
                            cellObj.innerHTML = htmlArr[i];  
                        }  
                    }  
                }  
                if(htmlCols[i]!=undefined && htmlCols[i]!="" && htmlCols[i]!="1"){  
                    cell.colSpan=htmlCols[i];  
                }  
            }  
            isSuccess = true;  
        }  
        return isSuccess;  
    }  
      
    /** 
     * 對表格新增一行 
     * 
     * tableObj 被新增的表格對象 
     * htmlArr 添加內容對象數組, 
     * htmlRows 每個td的元素對應的rowSpan參數,為空則獲取之前的Td信息,否則根據htmlRows生成 
     * colIndex 行號 默認方式在最后一列新增列(此處的指定列進行插入,在表格中存在rowSpan!=1的情況下會有有問題),從零開始 
     * 
     *返回新增成功、失敗 
     */ 
    function insertTableCol(){  
        //表格對象  
        var tableObj = arguments[0];  
        //增加對象集  
        var htmlArr = arguments[1];  
        //元素的TD的rowSpan屬性  
        var htmlRows = arguments[2]==undefined?new Array():arguments[2];  
        //增加的列位置  
        var colIndex = arguments[3];  
        //alert(colIndex);  
        var baseHtmlCols = doFetchBaseCols(tableObj,colIndex);  
        //判斷返回為undefined,則表示當前不可進行插入操作  
        if(baseHtmlCols==undefined){  
            return false;  
        }  
        //新增行成功標志,默認失敗  
        var isSuccess = doCheckPara(tableObj,htmlArr,htmlRows,colIndex,false,baseHtmlCols);  
          
        if(isSuccess){  
            //新增行  
            var rowSpanCount = 0;  
            var rowIndex = 0;  
            //alert("htmlArr.length="+htmlArr.length);  
            for(var i=0,rowIndex=0;rowIndex<tableObj.rows.length&&rowIndex<htmlArr.length;i++){  
                var trObj = tableObj.rows[rowIndex];  
                var index = baseHtmlCols[rowIndex];  
                var cellObj = trObj.insertCell(index);  
                //判斷傳入參數不為空,添加對象  
                if(htmlArr[i]!=undefined && htmlArr[i]!=null){  
                    if(htmlArr[i].constructor == Array){  
                        var childHtmlArr = htmlArr[i];  
                        for(var k=0;k<childHtmlArr.length;k++){  
                            if(typeof(childHtmlArr[k])=='object'){  
                                cellObj.appendChild(childHtmlArr[k]);  
                            }  
                        }  
                    }else{  
                        if(typeof(htmlArr[i])=='object'){  
                            cellObj.appendChild(htmlArr[i]);  
                        }else{  
                            cellObj.innerHTML = htmlArr[i];  
                        }  
                    }  
                }  
                if(htmlRows[i]!=undefined && htmlRows[i]!="" && htmlRows[i]!="1"){  
                    cellObj.rowSpan=htmlRows[i];  
                }  
                //alert(htmlRows[0]+"\n"+htmlRows[1]+"\n"+htmlRows[2]+"\n"+htmlRows[3]+"\n");  
                //跳過已經被合並的行  
                rowIndex = rowIndex + (htmlRows[i]!=undefined?parseFloat(htmlRows[i]):1);  
                //alert(rowIndex);  
            }  
            isSuccess = true;  
        }  
        return isSuccess;  
    }  
      
   /** 
    *獲取表格中一行的元素,對象數組,返回單元格對象數組、單元格的第一個子對象數組 
    *  
    * tableObj 表格對象 
    * rowIndex 獲取的行號 ,從零開始 
    * isCopy  獲取copy對象,默認為false,不進行copy 
    * isCellObj  獲取單元格對象數組標志,,默認為false,返回單元格的子對象 
    */ 
    function doGetRowObj(){  
        var objArr = new Array();  
        //表格對象  
        var tableObj = arguments[0];  
        //增加對象集  
        var rowIndex = arguments[1];  
        //是否獲取COPY對象  
        var isCopy = arguments[2]==undefined?false:arguments[2];  
        //是否為單元格對象  
        var isCellObj = arguments[3]==undefined?false:arguments[3];  
          
        //c判斷為當前為拷貝時  
        if(isCopy){  
            //var copyTable = document.body.createTextRange();  
            //copyTable.moveToElementText(tableObj);  
            var memeoryTable = tableObj.cloneNode(true);   
            tableObj = memeoryTable;  
        }  
        //判斷對象為空或者不是一個表格對象時  
        if(tableObj==undefined || tableObj.tagName!="TABLE"){  
            alert("傳入表格(tableObj)不是一個對象或表格!");  
            return objArr;  
        }  
        //判斷表格內容為空時  
        if(tableObj.rows==undefined||tableObj.rows.length==0){  
            alert("當前表格對象為空!");  
            return objArr;  
        }  
        //判斷要讀取的行參數為空  
        if(rowIndex==undefined){  
            alert("未指名獲取的行號!");  
            return objArr;  
        }  
        //判斷當前要獲取的行超過表格對象的范圍  
        if(rowIndex<0 || rowIndex>=tableObj.rows.length){  
            alert("要獲取的行號不在當前的表格對象內!");  
            return objArr;  
        }  
        //進行行內容提取,返回對象  
        var rowObj = tableObj.rows[rowIndex];  
        for(var i=0;i<rowObj.cells.length;i++){  
            var cellObj = rowObj.cells[i];  
            var objCopy;  
            //返回當前單元格  
            if(isCellObj){  
                objCopy = cellObj;  
            }  
            else{  
                objCopy = cellObj.childNodes!=undefined?cellObj.childNodes[0]:undefined;  
            }  
            objArr[i] = objCopy;  
        }  
        return objArr;  
    }  
      
    /** 
    *進行列或者行插入前的check,如果默認的colSpan與rowSpan不存在則根據行去前一行、列取前一列的思路獲取默認值 
    * 
     * tableObj 表格對象 
     * htmlArr 內容對象數組, 
     * htmlSpan 元素的TD的colSpan、rowSpan屬性 
     * index 行號 增加的行、列位置,從零開始 
    */ 
    function doCheckPara(){  
        //表格對象  
        var tableObj = arguments[0];  
        //增加對象集  
        var htmlArr = arguments[1];  
        //元素的TD的colSpan、rowSpan屬性  
        var htmlSpan = arguments[2];  
        //增加的行、列位置  
        var index = arguments[3];  
        //alert("tableObj="+tableObj+"\nhtmlArr.length="+htmlArr.length+"\nhtmlSpan.length="+htmlSpan.length+"\nindex="+index);  
        //新增列、行標志,默認為行追加  
        var isRowInsert = arguments[4]==undefined?true:false;  
        var baseHtmlCols = arguments[5];  
        //新增行成功標志,默認失敗  
        var isSuccess = false;  
        if(tableObj==undefined||tableObj.tagName!="TABLE"){  
            alert("傳入表格(tableObj)不是一個對象或表格!");  
            return isSuccess;  
        }  
        //傳入的為表格  
        else{  
            //驗證邏輯上的錯誤  
            if(htmlArr==undefined){  
                alert("傳入的對象數組(htmlArr)為空或未定義!");  
                return isSuccess;  
            }else if(htmlSpan.length>0 && htmlSpan.length!=htmlArr.length){  
                alert("傳入的屬性(htmlCols)與增加對象集(htmlArr)的長度不等!");  
                return isSuccess;  
            }  
            //行追加  
            if(isRowInsert){  
                var tableRowLength = tableObj.rows!=undefined?tableObj.rows.length:0;  
                //設置初始值  
                //設置元素對應的colSpan的屬性,默認取當前要插入行的前一行的屬性  
                if(htmlSpan.length==0 && index>0 && index<tableRowLength){  
                    //獲取臨近一行對象  
                    var lastTrObj = tableObj.rows[index-1];  
                    //獲取默認TD樣式與當前存入元素不對應,無法插入  
                    if(lastTrObj.childNodes.length!=htmlArr.length){  
                        alert("插入失敗,獲取默認單元格的colSpan屬性的個數與傳入對象的個數不相等!");  
                        return isSuccess;  
                    }else {  
                        for(var i=0;i<lastTrObj.childNodes.length;i++){  
                            var cellObj = lastTrObj.childNodes[i];  
                            //列屬性  
                            htmlSpan[i] = cellObj.colSpan!=undefined?cellObj.colSpan:"1";  
                        }  
                    }  
                }  
            }  
            //列追加時  
            else{  
                var tableRowLength = tableObj.rows!=undefined?tableObj.rows.length:0;  
                if(index!=undefined && index>0 && htmlSpan.length==0){     
                    for(var i=0,k=0;i<tableRowLength;i++){  
                        if(baseHtmlCols[i]!=undefined && baseHtmlCols[i]>0){  
                            var lastTrObj = tableObj.rows[i];  
                            //alert("baseHtmlCols[i]="+baseHtmlCols[i]);  
                            //alert("lastTrObj.cells.length="+lastTrObj.cells.length);  
                            var lastTdRowSpan = lastTrObj.cells[parseInt(baseHtmlCols[i])-1].rowSpan;  
                            htmlSpan[k++] = lastTdRowSpan;  
                        }  
                    }  
                    if(htmlSpan.length!=htmlArr.length){  
                        alert("插入失敗,獲取默認單元格的rowSpan屬性的個數與傳入對象的個數不相等!");  
                        return isSuccess;  
                    }  
                }  
            }  
        }  
        isSuccess = true;  
        return isSuccess;  
    }  
      
    /** 
    *獲取表格在指定列在實際行中位置 
    * 
    *tableObj 表格對象 (必須項) 
    *index 指定的列,數值(必須項),從零開始 
    * 
    *return baseHtmlCols行中指定列的實際位置,一般情況下返回一個數組,出錯時返回一個undefined對象 
    */ 
    function doFetchBaseCols(){  
        var tableObj = arguments[0];  
        var index = arguments[1];  
        var noAlert = arguments[2]==undefined?false:arguments[2];  
        // 需要返回的行實際位置  
        var baseHtmlCols = new Array();  
          
        //alert("tableObj="+tableObj);  
        //獲取初始值,指定的列  
        for(var i=0;i<tableObj.rows.length;i++){  
            baseHtmlCols[i] = index;  
        }  
        if(index!=0){  
            //進行值獲取  
            for(var i=0;i<tableObj.rows.length;i++){  
                var row = tableObj.rows[i];  
                //默認插入列  
                if(index==undefined){  
                    baseHtmlCols[i] = row.cells.length;  
                }  
                //生成實際的列值  
                else{  
                    var colsIndex = 0;  
                    //計算當前行的個數  
                    for(var j=0;j<row.cells.length;j++){  
                        if(j==baseHtmlCols[i]){  
                            break;  
                        }  
                        var cell = row.cells[j];  
                        //合並的行數  
                        var rowSpanIndex = cell.rowSpan!=undefined?cell.rowSpan:0;  
                        //合並的列數  
                        var colSpanIndex = cell.colSpan!=undefined?cell.colSpan:1;  
                        //將當前行減去該TD的colspan參數的影響  
                        baseHtmlCols[i] = baseHtmlCols[i] - (colSpanIndex-1);  
                        //循環行,將當前合並的列影響到的列,均調整相應的個數  
                        for(var k=1;k<rowSpanIndex;k++){  
                            baseHtmlCols[i+k] = baseHtmlCols[i+k] - colSpanIndex;  
                        }     
                        //判斷當前指定的列被跳過,因為當前列已經被合並  
                        if(j+(colSpanIndex-1) > baseHtmlCols[i]){  
                            if(!noAlert){  
                                alert("遍歷到第"+i+"行時,因為當前插入的列包含在第"+j+"列合並的單元格內,無法在此處進行操作!");  
                            }  
                            return undefined;  
                        }  
                        //判斷當前行遍歷到指定的列時  
                        else if(j == baseHtmlCols[i]){  
                            break;  
                        }  
                    }  
                }  
            }  
        }  
        return baseHtmlCols;  
    }  
 
    /** 
    * 根據表格的一個td的子項,返回當前對象所在列的每個單元格對應的行的位置 
    * 
    *obj 傳入的表格中某個td的一個子對象 
    *isComplexTable 是否復雜表格標志,默認下都使用false, 
           1、簡單表格,根據該單元格之前的部分就能計算出當前列在表格中的絕對位置的,就設置成false,或者不定義 
           2、針對刪除的單元格所在的行存在受之前行中單元格的rowspan與colspan影響,而使得得到的colIndex列的絕對位置 
    * 
    *返回一個長度為表格的行個數,存有該列在每行中的位置 
    * 
    *缺陷,如果表格比較復雜,頁面上顯示的一列但是在實際行中不是相等的位置 
    */ 
    function doGetColIndex(obj){  
        var obj = arguments[0];  
        var isComplexTable = arguments[1]==undefined?false:arguments[1];  
          
        var tdObj = obj.parentNode;  
        var trObj = tdObj.parentNode;  
        var tableObj = trObj.parentNode;  
        if(tableObj.tagName!='TABLE'){  
            tableObj = tableObj.parentNode;  
        }  
        //當前行下的第幾列  
        var colIndex = tdObj.cellIndex;  
        //當前行是第幾行  
        var rowIndex = trObj.rowIndex;  
        //定義一個需要返回的值  
        var arrColsIndex;  
        //alert("colIndex="+colIndex);  
        //alert("rowIndex="+rowIndex);  
        //alert("isComplexTable="+isComplexTable);  
        if(isComplexTable){  
            for(var i=0;true;i++){  
                arrColsIndex = doFetchBaseCols(tableObj,i);  
                if(arrColsIndex!=undefined){  
                    if(arrColsIndex[rowIndex]==colIndex){  
                        break;  
                    }else if(arrColsIndex[rowIndex]>colIndex){  
                        alert("出錯當前方法不支持合並列的操作!");  
                        return undefined;  
                    }  
                }  
            }  
        }else{  
            for(var i=colIndex-1;i>-1;i--){  
                //alert("colIndex="+colIndex);  
                var ChildObj = trObj.cells[i];  
                var colspanIndex = ChildObj.colSpan-1;  
                //alert("colspanIndex="+colspanIndex);  
                colIndex = colIndex + colspanIndex;  
            }  
            //alert('begin');  
            //alert("colIndex="+colIndex);  
            arrColsIndex = doFetchBaseCols(tableObj,colIndex);  
        }  
        return arrColsIndex;  
    }  
      
    /** 
    *獲取刪除當前行,影響到單元格rowSpan屬性的單元格集,此處只能遍歷到該行之前的受影響的單元格;如果當前行存在rowSpan屬性存在大於1的,本方法未遍歷到 
    * 
    *tableObj 表格對象 (必須項) 
    *index 指定的行,數值(必須項) 
    * 
    *return effectCells,一般情況下返回一個數組,出錯時返回一個undefined對象 
    */ 
    function doFetchEffectCells(){  
        var tableObj = arguments[0];  
        var index = arguments[1];  
        //插入當前會影響到rowSpan屬性的單元格對象集  
        var effectCells = new Array();  
        //判斷新增的行在表格的中間時  
        if(index>0&&index<tableObj.rows.length){  
            for(var i=0,k=0;i<index;i++){  
                var row = tableObj.rows[i];  
                for(var j=0;j<row.cells.length;j++){  
                    var cellObj = row.cells[j];  
                    var rowSpanIndex = cellObj.rowSpan!=undefined?cellObj.rowSpan:1;  
                    if(i+rowSpanIndex>index){  
                        effectCells[k++] = cellObj;  
                    }  
                }  
            }  
        }  
        return effectCells;  
    }

/Files/lhws/js操作table元素表格的行列新增刪除匯集.txt


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM