table elements_javascript 기술을 사용하여 js를 사용하여 테이블 행과 열을 추가하고 삭제하는 기술 요약

이 기사의 예에서는 js를 사용하여 테이블 요소를 조작하여 테이블 행과 열을 추가하고 삭제하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

/************ 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&#63;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&#63;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&#63;0:arguments[2]; 
 //var beginColIndex = arguments[3]==undefined&#63;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&#63;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&#63;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&#63;1:arguments[1]; 
 //合并的行数 
 var rowspan = arguments[2]==undefined&#63;1:arguments[2]; 
 //是否保留每个单元格的值 
 var keepFlag = arguments[3]==undefined&#63;false:arguments[3]; 
 var elementObjs = new Array(); 
 var tdObj = obj.tagName!='TD'&#63;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&#63;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&#63;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&#63;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&#63;false:arguments[2]; 
 //是否为单元格对象 
 var isCellObj = arguments[3]==undefined&#63;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&#63;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&#63;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&#63;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&#63;cellObj.colSpan:"1"; 
   } 
   } 
  } 
  } 
  //列追加时 
  else{ 
  var tableRowLength = tableObj.rows!=undefined&#63;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&#63;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&#63;cell.rowSpan:0; 
   //合并的列数 
   var colSpanIndex = cell.colSpan!=undefined&#63;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&#63;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&#63;cellObj.rowSpan:1;
   if(i+rowSpanIndex>index){
   effectCells[k++] = cellObj;
   }
  }
  }
 }
 return effectCells;
}

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.