`
loven_11
  • 浏览: 58996 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

js操作table元素,表格的行列新增、删除汇集

阅读更多

直接上代码,如何表格涉及到合并的话,虽然做了处理可能还存在一些问题。(另外这个代码主要用于ie下,火狐等浏览器需要针对event一些地方再做一些修改的)

/************ 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;
	}

 

朋友的网站 http://woods2010.cn.alibaba.com/ 专业电子器件代购

1
1
分享到:
评论

相关推荐

    js操作table元素,表格的行列新增、删除汇集.txt

    根据给定的文件信息,我们可以总结出一系列关于使用JavaScript(简称JS)操作HTML中的`&lt;table&gt;`元素,尤其是对表格的行(`&lt;tr&gt;`)和列(`&lt;td&gt;`或`&lt;th&gt;`)进行增删操作的关键知识点。以下是对这些功能的详细解释: #...

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

    本文将深入探讨如何使用JavaScript来实现表格的行列新增和删除功能,这对于网页开发尤其是数据展示非常实用。 首先,我们来看如何删除表格的行。在JavaScript中,`doTableRowDelete`函数用于删除指定的行。这个函数...

    javascript清空table表格的方法

    本文实例讲述了javascript清空table表格的方法。分享给大家供大家参考。具体如下: 1. 通常方法 循环table的rows,然后一个一个删除。 这个方法是通常的方法,可行,但是效率不好。 2. 另一个方法 var artTable = ...

    table 行列转置demo

    在IT领域,尤其是在Web开发中,表格(Table)是一种常用的数据展示方式,它能够清晰、直观地呈现结构化的信息。本资源提供了一个“表格行列转置”的示例,旨在帮助开发者学习如何通过HTML、jQuery、JavaScript和Java...

    table动态增加删除行列

    使用javascript实现table动态增加删除行列。

    js实现漂亮的table表格

    在前端开发中,JavaScript(JS)和CSS是创建交互式且视觉吸引人的网页元素不可或缺的工具,特别是对于呈现数据的表格。"js实现漂亮的table表格"这个主题涉及到使用JavaScript和CSS来增强HTML表格的功能和外观,使其...

    js表格操作,DOM实现数据动态增删查改

    在本主题"js表格操作,DOM实现数据动态增删查改"中,我们将深入探讨如何使用原生JavaScript通过DOM操作来实现数据在表格中的动态管理。 1. **创建表格**:首先,我们需要在HTML中创建一个基础的表格结构。这通常...

    bootstrapTable实现表格内数据的添加、删除、修改、查询

    bootstrapTable实现表格内数据的添加、删除、修改、查询

    js实现table行列固定

    引用JS,固定table的前n行及前n列, @*表格冻结*@ [removed] $(function () { $(".fixTable").tableHeadFixer({ "left": 0 }); $(".fixTable").tableHeadFixer({ "top": 1 }); }); [removed]

    原生js table表格自动排序效果

    在JavaScript的世界里,实现表格(table)数据的自动排序是一项常见的需求。这通常涉及到对HTML DOM的操作以及数据处理。在给定的资源中,“原生js table表格自动排序效果”提供了一个无需依赖任何外部库(如jQuery...

    js table 表格 复杂表格 多维展示 多维表格【idosoft原创】

    经过研究,发布我的复杂表格、多维展示的成果,如图: 下面是源码(copy and paste,run 看效果): 访问链接: http://www.idosoft.com.cn/javatech/11.html

    兼容主流浏览器的纯JS动态拖动表格实现行列内容交换

    项目开发中需要用到一个拖动交换表格的功能,上网搜到雅虎的一...就自己综合网上资源写了一个可兼容IE,firefox,Chrome,Safari和Opera等主流浏览器的纯JS动态拖动表格实现行列内容交换。主要代码就不到400行JS而已。

    表格行列合并JS

    //函数说明:合并指定表格(表格id为_w_table_id)指定列(列数为_w_table_colnum)的相同文本的相邻单元格 //参数说明:_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #...

    js创建table表格

    在JavaScript中创建动态的HTML...JavaScript的灵活性和强大的DOM操作能力使得动态生成表格成为可能,无论是在教学还是实际项目中都非常有用。在学习和实践中,不断熟悉并应用这些知识,你将成为一个出色的前端开发者。

    HTML table表格编辑器

    总结来说,"HTML Table表格编辑器"是一款提高HTML表格操作效率的工具,它通过JavaScript实现了行的移动和单元格的编辑功能,为网页开发者和内容创作者提供了更为便利的工作环境。用户可以通过`index.htm`文件查看并...

    TableTree 表格树

    2. 渲染逻辑:在HTML中,表格元素`&lt;table&gt;`和`&lt;tr&gt;`用于创建表格结构,而树状结构的展开与折叠则需要借助JavaScript或CSS实现。JavaScript通常负责动态加载、添加、删除节点,以及控制节点的展开和折叠状态。CSS则...

    前台js将table转为Excel表格下载

    本文将详细讲解如何使用JavaScript实现这一功能,主要基于提供的资源,特别是"前台js将table转为Excel表格下载"这个主题。 首先,我们要理解JavaScript(简称js)是一种在客户端运行的脚本语言,它可以与HTML和CSS...

Global site tag (gtag.js) - Google Analytics