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

本文实例讲述了js操作table元素实现表格行列新增、删除的方法。分享给大家供大家参考，具体如下：

 
 
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; 
} 
 
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; 
} 
 
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]; 
   } 
   } 
  } 
  } 
 } 
} 
 
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; 
} 
 
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; 
} 
 
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(); 
  } 
} 
 
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; 
} 
 
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; 
} 
 
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; 
} 
 
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程序设计有所帮助。