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 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
替代window.event.srcElement效果的可兼容性的函数
Dec 18 Javascript
微信WeixinJSBridge API使用实例
May 25 Javascript
详解javascript遍历方式
Nov 11 Javascript
js删除局部变量的实现方法
Jun 25 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
JavaScript实现分页效果
Mar 28 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
面包屑导航详解
Dec 07 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
php调整服务器时间的方法
2015/04/03 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
jQuery使用手册之一
2007/03/24 Javascript
解析使用JS 清空File控件的路径值
2013/07/08 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
把字符串按照特定的字母顺序进行排序的js代码
2014/01/28 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
对angularJs中自定义指令replace的属性详解
2018/10/09 Javascript
微信小程序自定义toast弹窗效果的实现代码
2018/11/15 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
Python 3.3实现计算两个日期间隔秒数/天数的方法示例
2019/01/07 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Python列表解析操作实例总结
2020/02/26 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
HTML5中form如何关闭自动完成功能的方法
2018/07/02 HTML / CSS
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
骨干教师培训制度
2014/01/13 职场文书
2014年科研工作总结
2014/12/03 职场文书
班主任2015新年寄语
2014/12/08 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
好员工观后感
2015/06/17 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript