js操作table元素,表格的行列新增、删除汇集.doc

/* 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 = arguments0; var trIndexs = arguments1; var tdCount = arguments2=undefined?1:parseFloat(arguments2); 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-1;i-) tablObj.deleteRow(delIndexArri); isDeleteFlag = true; return isDeleteFlag; /* * 删除表格的列 * * tdCount 根据当前event事件向上追溯TD对象几次，默认为1次 * * 说明：event事件需要附着在将要删除的TD内部，且不能有多重TD的嵌套；否则需要指定嵌套几层TD对象 */ function doTableColDelete() var isDeleteFlag = false; var tdCount = arguments0=undefined?1:parseFloat(arguments0); 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 = arguments0; var spanObjs; if(obj!=undefined) spanObjs = obj.getElementsByTagName(span); else spanObjs = document.getElementsByTagName(span); for(var i=0;ispanObjs.length;i+) var tdObj = spanObjsi.parentNode; while(tdObj.tagName!=TD&typeof(tdObj)=Object) tdObj = tdObj.parentNode; if(tdObj.tagName=TD) var offsetWidth = tdObj.offsetWidth; spanObjsi.style.width = offsetWidth-5; /* * 合并表格中纵向相邻单元格的内容相同的项 * * tableObj 表格对象（必须） * combainCols 需要合并的列 (格式：从小到大，连续的用-分割，独立的用逗号; 例如：1-5,7,9) * beginRowIndex 从第几行开始合并， 默认从第零行开始 */ function conbainTableRow() var tableObj = arguments0; var combainCols = arguments1; var beginRowIndex = arguments2=undefined?0:arguments2; /var beginColIndex = arguments3=undefined?0:arguments3; var colsArr = combainCols.split(,); var cols = new Array(); var index = 0; for(var i=0;icolsArr.length;i+) var indexChar = colsArri.indexOf(-); if(indexChar!=-1) var beginIndex = parseInt(colsArri.substring(0,indexChar); var endIndex = parseInt(colsArri.substring(indexChar+1); for(var j=beginIndex;jbeginRowIndex) var modelArr = new Array(); for(var i=beginRowIndex;i=0;k-) var j = colsk; if(modelArrj=undefined) modelArrj = row.cellsj; else if(row.cellsj.outerText = modelArrj.outerText) modelArrj.rowSpan = modelArrj.rowSpan + 1; row.deleteCell(j); else modelArrj = row.cellsj; /* * 行上移 * *minRowIndex 向上移动到的最小行号，默认时零 * Elm 可以缺省，如果当前需要移动的行与激发本函数的位置有比较复杂的关系时，需要自行指名tr对象或者当前行的td对象传入 * * 返回，移动成功返回true，如果当前时第minRowIndex行则返回false */ function moveUp() /传入的对象 var minRowIndex = arguments0=undefined?0:arguments0; /传入的对象 var Elm = arguments1; /返回值 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 = arguments0=undefined?0:arguments0; /传入的对象 var Elm = arguments1; /返回值 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.rowsa.all.tags(input); var e3 = myTable.rowsb.all.tags(input); var arr = ; /遍历a行的所有input控件 for(i = 0; i e2.length; i+) if(e2i.type = checkbox) /对所有checkbox控件添加到数组中 arr.push(e2i, e2i.checked); /遍历b行的所有input控件 for(i = 0; i 0) arr.shift().checked = arr.shift(); /* *替换单元格的样式为传入的单元格样式 * *tdObj 模板单元格 *targetTdObj 目标替换的单元格 * */ function cloneStyle() /单元格中对象 var tdObj = arguments0; /合并列数 var targetTdObj = arguments1; /克隆传入的对象 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;i1) / colIndexs = doFetchBaseCols(tableObj,doGetColIndex(obj); / for(var i=colspan-1;i0;i-) /alert(i+colIndex=+(i+colIndex); /alert(trObj.cells.length=+trObj.cells.length); var tempObj = trObj.cellsi+colIndex.cloneNode(true); elementObjselementObjs.length = tempObj; trObj.removeChild(trObj.cellsi+colIndex); tdObj.colSpan = tdObj.colSpan + colspan - 1; /alert(keepFlag=+keepFlag); /alert(elementObjs.length=+elementObjs.length); /添加每个单元格的对象 if(keepFlag&elementObjs.length0) for(var i=elementObjs.length-1;i-1;i-) var tempObj = elementObjsi; for(var j=0;jtableObj.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;ihtmlArr.length;i+) var cellObj = newTrObj.insertCell(i); /判断传入参数不为空，添加对象 if(htmlArri!=undefined & htmlArri!=null) if(htmlArri.constructor = Array) var childHtmlArr = htmlArri; for(var k=0;kchildHtmlArr.length;k+) if(typeof(childHtmlArrk)=object) cellObj.appendChild(childHtmlArrk); else if(typeof(htmlArri)=object) cellObj.appendChild(htmlArri); else cellObj.innerHTML = htmlArri; if(htmlColsi!=undefined & htmlColsi!= & htmlColsi!=1) cell.colSpan=htmlColsi; isSuccess = true; return isSuccess; /* * 对表格新增一行 * * tableObj 被新增的表格对象 * htmlArr 添加内容对象数组， * htmlRows 每个td的元素对应的rowSpan参数，为空则获取之前的Td信息，否则根据htmlRows生成 * colIndex 行号 默认方式在最后一列新增列(此处的指定列进行插入，在表格中存在rowSpan!=1的情况下会有有问题)，从零开始 * *返回新增成功、失败 */ function insertTableCol() /表格对象 var tableObj = arguments0; /增加对象集 var htmlArr = arguments1; /元素的TD的rowSpan属性 var htmlRows = arguments2=undefined?new Array():arguments2; /增加的列位置 var colIndex = arguments3; /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;rowIndextableObj.rows.length&rowIndexhtmlArr.length;i+) var trObj = tableObj.rowsrowIndex; var index = baseHtmlColsrowIndex; var cellObj = trObj.insertCell(index); /判断传入参数不为空，添加对象 if(htmlArri!=undefined & htmlArri!=null) if(htmlArri.constructor = Array) var childHtmlArr = htmlArri; for(var k=0;kchildHtmlArr.length;k+) if(typeof(childHtmlArrk)=object) cellObj.appendChild(childHtmlArrk); else if(typeof(htmlArri)=object)