tableTool(表格的操作大全)

/** * 删除表格的行 * * tdCount 根据当前event事件向上追溯TD对象几次，默认为1次 * * 说明：event事件需要附着在将要删除的TD内部，且不能有多重TD的嵌套；否则需要指定嵌套几层TD对象 */ function doTableRowDelete() { var tableObj = 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 = trObj.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; if (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]== undefined ? "" : 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 = []; for (i = 0; i < e2.length; i++) { if (e2[i].type == "checkbox") { arr.push(e2[i], e2[i].checked); } } for (i = 0; i < e3.length; i++) { if (e3[i].type == "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--) { var tempObj = trObj.cells[i + colIndex].cloneNode(true); elementObjs[elementObjs.length] = tempObj; trObj.removeChild(trObj.cells[i + colIndex]); } tdObj.colSpan = tdObj.colSpan + colspan - 1; 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]; var htmlCols = arguments[2] == undefined ? new Array() : arguments[2]; var rowIndex = arguments[3]; 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) { 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]; var htmlRows = arguments[2] == undefined ? new Array() : arguments[2]; var colIndex = arguments[3]; var baseHtmlCols = doFetchBaseCols(tableObj, colIndex); if (baseHtmlCols == undefined) { return false; } var isSuccess = doCheckPara(tableObj, htmlArr, htmlRows, colIndex, false, baseHtmlCols); if (isSuccess) { var rowSpanCount = 0; var rowIndex = 0; 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]; } rowIndex = rowIndex + (htmlRows[i] != undefined ? parseFloat(htmlRows[i]) : 1); } 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]; var isCopy = arguments[2] == undefined ? false : arguments[2]; var isCellObj = arguments[3] == undefined ? false : arguments[3]; 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]; var htmlSpan = arguments[2]; var index = arguments[3]; 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; if (htmlSpan.length == 0 && index > 0 && index < tableRowLength) { var lastTrObj = tableObj.rows[index - 1]; 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]; 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(); 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; 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; 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--) { var ChildObj = trObj.cells[i]; var colspanIndex = ChildObj.colSpan - 1; colIndex = colIndex + colspanIndex; }; arrColsIndex = doFetchBaseCols(tableObj, colIndex); } return arrColsIndex; } /** *获取删除当前行，影响到单元格rowSpan属性的单元格集，此处只能遍历到该行之前的受影响的单元格；如果当前行存在rowSpan属性存在大于1的，本方法未遍历到 * *tableObj 表格对象 （必须项） *index 指定的行，数值（必须项） * *return effectCells，一般情况下返回一个数组，出错时返回一个undefined对象 */ function doFetchEffectCells() { var tableObj = arguments[0]; var index = arguments[1]; 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; }