js操作table元素实现表格行列新增、删除技巧总结


Posted in Javascript onNovember 18, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
JS操作图片(增,删,改) 例子
Apr 17 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
详解jQuery中的deferred对象的使用(一)
May 27 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
JAVA面试题 static关键字详解
Jul 16 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
vue实现表格合并功能
Dec 01 Vue.js
node.js如何自定义实现一个EventEmitter
Jul 16 Javascript
跟我学习javascript的for循环和for...in循环
Nov 18 #Javascript
js实现模拟银行卡账号输入显示效果
Nov 18 #Javascript
跟我学习javascript的prototype原型和原型链
Nov 18 #Javascript
超精准的javascript验证身份证号的具体实现方法
Nov 18 #Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 #Javascript
javascript下拉列表中显示树形菜单的实现方法
Nov 17 #Javascript
JS封装cookie操作函数实例(设置、读取、删除)
Nov 17 #Javascript
You might like
实用函数2
2007/11/08 PHP
php懒人函数 自动添加数据
2011/06/28 PHP
php实现数据库的增删改查
2017/02/26 PHP
PHP图片水印类的封装
2017/07/06 PHP
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
javascript 拖动表格行实现代码
2011/05/05 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
js和jQuery设置Opacity半透明 兼容IE6
2016/05/24 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
Node.js 中如何收集和解析命令行参数
2021/01/08 Javascript
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
浅谈Python中copy()方法的使用
2015/05/21 Python
Python中random模块生成随机数详解
2016/03/10 Python
python flask中静态文件的管理方法
2018/03/20 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
Python any()函数的使用方法
2019/10/28 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
HTML5新增加的功能详解
2016/09/05 HTML / CSS
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
结构和类有什么异同
2012/07/16 面试题
加工操作管理制度
2014/01/19 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
大学生团日活动总结
2015/05/06 职场文书
python脚本框架webpy的url映射详解
2021/11/20 Python