欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-03 17:46:41
...
本文实例讲述了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-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;ibeginRowIndex){ 
  var modelArr = new Array(); 
  for(var i=beginRowIndex;i=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  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;i1){ 
 // 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;jtableObj.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=tableObj.rows.length){ 
  alert("要获取的行号不在当前的表格对象内!"); 
  return objArr; 
 } 
 //进行行内容提取,返回对象 
 var rowObj = tableObj.rows[rowIndex]; 
 for(var i=0;i0 && 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 && index0 && htmlSpan.length==0){ 
   for(var i=0,k=0;i0){ 
    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 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&&indexindex){
   effectCells[k++] = cellObj;
   }
  }
  }
 }
 return effectCells;
}

希望本文所述对大家JavaScript程序设计有所帮助。