本文實例講述了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;
}
希望本文所述對大家JavaScript程序設計有所幫助。