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

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

时间: 2015-11-17

JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题

正文 前言:一年前,博主分享过一篇关于bootstrapTable组件冻结列的解决方案  JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ,通过该篇,确实可以实现bootstrapTable的冻结列效果,并且可以兼容ie浏览器.这一年的时间,不断有园友以及群里面的朋友问过我关于固定高度之后,冻结列页面效果不能对齐的问题,奈何博主太忙,一直没有抽空将这个问题优化.最近项目里面也不断有人提过这个bug,这下子不能再推了,必须要直面"惨淡的bug",于

jquery.tableSort.js表格排序插件使用方法详解

本文实例为大家分享了jquery.tableSort.js表格排序的具体代码,供大家参考,具体内容如下 1.一定要引jQuery包,所有jq插件都是基于jQuery包的 2.如果想指定哪一栏不排序这样写 $("#mytable").tablesorter({headers:{5:{sorter:false}}}); 第5列的sorter为false就OK了 参考:http://www.jb51.net/article/105217.htm <!DOCTYPE html> &

JS实现点击Radio动态更新table数据

tbody定义一个标签 当上面变化的,在js里面做拼接就行了,拼接结束 tbody.html(XXX) <script type="text/javascript"> $(function(){ var quotas = { 1:{name:"工商银行",oneTime:1000}, 2:{name:"农业银行",oneTime:800}, 3:{name:"中国银行",oneTime:2000}, 4:{name

详解PHP中的 input属性(隐藏 只读 限制)

隐藏 <input type="hidden"> 只读 <input type="text" readonly> 失效 <input type="text" disabled> 限制 <input type="text" maxlength="1"> ENTER键让光标移到下一个输入框 <input onkeydown="if(event.ke

angularJs中datatable实现代码

本文介绍了angularJs中datatable实现,有需要的小伙伴可以参考下 html引用derective: 复制代码 代码如下: <table datatable dtOptions="dtOptionsExample2" class="table table-striped m-b-none"></table> controller设置: $scope.dtOptions = { "bProcessing": tr

AngularJS中的路由使用及实现代码

前  言 本章节将为大家介绍 AngularJS 路由.AngularJS 路由允许我们通过不同的 URL 访问不同的内容.通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 1.1 Angular JS路由基础知识讲解 在AngularJS中使用路由: 1. 导入路由文件:angular-route.js 2. 在主模块中注入"ngRoute". angular.module("app",[

AngularJS中的Promise详细介绍及实例代码

Angular中的Promise 在用jQuery的时候就知道 promise 是 Js异步编程模式的一种模式,但是不是很明白他跟JQuery的deferred对象有什么区别.随着公司项目的进行,要跟后台接数据了,所以决定搞定它. Promise Promise是一种模式,以同步操作的流程形式来操作异步事件,避免了层层嵌套,可以链式操作异步事件. 我们知道,在编写JavaScript异步代码时,callback是最最简单的机制,可是用这种机制的话必须牺牲控制流.异常处理和函数语义化为代价,甚至会

使用AngularJS中的SCE来防止XSS攻击的方法

这篇文章展示了有关XSS(跨站脚本)的不同方案以及怎样使用AngularJS中SCE($sceProvider),sanitize service这些特性来正确处理XSS.如果我遗漏了什么重要的地方请直接评论/建议.同时,错别字请见谅. 以下几点内容将是我接下来要讲述的重点: 全部转码HTML 安全插入HTML的同时忽略类似"script"这样的标签.如果不加以注意,这将一样存在风险同时也会丑化页面,尤其是在有"img"标签的时候. 依赖并插入纯HTML:这也有风险

AngularJS 教程及实例代码

angularjs 简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑定数据到 HTML. AngularJS 是一个 JavaScript 框架 AngularJS 是一个 JavaScript 框架.它是一个以 JavaScript 编写的库. AngularJS 是以一个 JavaScript 文件形式发布的,可通过 script 标签添加到网页中:

详解AngularJs中$sce与$sceDelegate上下文转义服务

一.严格的上下文转义服务 严格的上下文转义(SCE)是一种需要在一定的语境中导致AngularJS绑定值被标记为安全使用语境的模式.由用户通过ng-bind-html绑定任意HTML语句就是这方面的一个例子.我们称这些上下文转义为特权或者SCE. 二.$sce $sce 服务是AngularJs提供的一种严格上下文转义服务. 下面代码是简化了的ngBindHtml实现(当然,这不是完整版ngBindHtml源码): var ngBindHtmlDirective = ['$sce', funct

AngularJS中使用three.js的实例详解

AngularJS中使用three.js的实例详解 一.轨迹球的引入问题 一开始我是用下面的方式引如轨迹球,但是会报Trackballcontrols is undefined的错. import * as THREE from 'three'; import * as Trackballcontrols from 'three'; 但其实我是能够在node_module下的threejs的包中找到Trackballcontrols的文件的,我一开始以为是引用的路径没对然后修改路径到对应包下Tr

详解AngularJS中自定义过滤器

过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果.主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等.ng内置了一些过滤器,它们是:currency(货币).date(日期).filter(子串匹配).json(格式化json对象).limitTo(限制个数).lowercase(小写).uppercase(大写).number(数字).orderBy(排序).总共九种.除此之外还可以自定义过滤器,这个就强大了,可以满足任何

AngularJS中$http的交互问题

这篇文章,主要是通过我们熟悉的jquery中ajax和jsonp的类型方式,总结一下$http的使用. $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. 1. angular中的ajax 写法一: $http({ method: 'GET', //可以改成POST url: '/someUrl' }).then(function successCallback(response) { // 请求成功执行代码 }, function errorCallback(re

详解AngularJS中的filter过滤器用法

系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这篇简单说一下angularjs的filter功能,angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的. 一,内置的过滤器 1,uppercase,lowercase大小转换 {{ "lower cap string" | uppercase }} //结果: