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

2024-03-25 15:29:04 362
本文实例讲述了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对象
*/
functiondoTableRowDelete(){
vartablObj=arguments[0];
vartrIndexs=arguments[1];
vartdCount=arguments[2]==undefined?1:parseFloat(arguments[2]);
if(trIndexs==undefined){
tdCount=tdCount-1;
vartdObj=event.srcElement;
vartrObj,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;
}
varcellIndex=tdObj.cellIndex;
varrowIndex=trObj.rowIndex;
vareffectCells=doFetchEffectCells(tableObj,rowIndex);
for(vari=0;i<effectCells.length;i++){
effectCells[i].rowSpan=effectCells[i].rowSpan-1;
}
tableObj.deleteRow(rowIndex);
}else{
vardelIndexArr=trIndexs.split(",");
for(vari=delIndexArr.length-1;i>-1;i--){
tablObj.deleteRow(delIndexArr[i]);
}
}
isDeleteFlag=true;
returnisDeleteFlag;
}
/**
*删除表格的列
*
*tdCount根据当前event事件向上追溯TD对象几次，默认为1次
*
*说明：event事件需要附着在将要删除的TD内部，且不能有多重TD的嵌套；否则需要指定嵌套几层TD对象
*/
functiondoTableColDelete(){
varisDeleteFlag=false;
vartdCount=arguments[0]==undefined?1:parseFloat(arguments[0]);
vartdObj=event.srcElement;
while(tdCount!=0){
tdCount--;
while(tdObj.tagName!='TD'){
tdObj=tdObj.parentNode;
}
}
vartrObj=tdObj.parentNode;
vartableObj=trObj.parentNode;
varcellIndex=tdObj.cellIndex;
varrowIndex=trObj.rowIndex;
tableObj.deleteRow(rowIndex);
isDeleteFlag=true;
returnisDeleteFlag;
}
/**
*根据Span外最临近的TD的宽度计算重置当前Span的宽度
*
*obj可以是页面上一个容器对象，TR、TD、TABLE，此项为空，则会遍历页面上所有的Span对象
*/
functioncalculateSpanWidth(){
varobj=arguments[0];
varspanObjs;
if(obj!=undefined){
spanObjs=obj.getElementsByTagName('span');
}else{
spanObjs=document.getElementsByTagName('span');
}
for(vari=0;i<spanObjs.length;i++){
vartdObj=spanObjs[i].parentNode;
while(tdObj.tagName!='TD'&&typeof(tdObj)=='Object'){
tdObj=tdObj.parentNode;
}
if(tdObj.tagName=='TD'){
varoffsetWidth=tdObj.offsetWidth;
spanObjs[i].style.width=offsetWidth-5;
}
}
}
/**
*合并表格中纵向相邻单元格的内容相同的项
*
*tableObj表格对象（必须）
*combainCols需要合并的列(格式：从小到大，连续的用-分割，独立的用逗号;例如：1-5,7,9)
*beginRowIndex从第几行开始合并，默认从第零行开始
*/
functionconbainTableRow(){
vartableObj=arguments[0];
varcombainCols=arguments[1];
varbeginRowIndex=arguments[2]==undefined?0:arguments[2];
//varbeginColIndex=arguments[3]==undefined?0:arguments[3];
varcolsArr=combainCols.split(",");
varcols=newArray();
varindex=0;
for(vari=0;i<colsArr.length;i++){
varindexChar=colsArr[i].indexOf("-");
if(indexChar!=-1){
varbeginIndex=parseInt(colsArr[i].substring(0,indexChar));
varendIndex=parseInt(colsArr[i].substring(indexChar+1));
for(varj=beginIndex;j<=endIndex;j++){
cols[index++]=j;
}
}
else{
cols[index++]=parseInt(colsArr[i]);
}
}
if(tableObj.rows.length>beginRowIndex){
varmodelArr=newArray();
for(vari=beginRowIndex;i<tableObj.rows.length;i++){
varrow=tableObj.rows[i];
for(vark=cols.length-1;k>=0;k--){
varj=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
*/
functionmoveUp(){
//传入的对象
varminRowIndex=arguments[0]==undefined?0:arguments[0];
//传入的对象
varElm=arguments[1];
//返回值
varisSuccess=false;
//表格对象
varmyTable;
if(Elm==undefined){
Elm=event.srcElement;
}
while(Elm&&Elm.tagName!="TR"){
Elm=Elm.parentElement;
}
//当前行号
varx=Elm.rowIndex;
//获取表格对象
myTable=Elm.parentElement;
if(myTable.tagName!='TABLE'){
myTable=myTable.parentNode;
}
//移到上一行
if(x>minRowIndex){
moveCell(myTable,x,x-1);
isSuccess=true;
}
returnisSuccess;
}
/**
*行下移
*
*minRowIndex向下移动到表格的倒数几行，默认是零，即表格的最后一行
*Elm可以缺省，如果当前需要移动的行与激发本函数的位置有比较复杂的关系时，需要自行指名tr对象或者当前行的td对象传入
*
*返回，移动成功返回true，如果当前时最后一行则返回false
*/
functionmoveDown(){
//传入的对象
varminRowIndex=arguments[0]==undefined?0:arguments[0];
//传入的对象
varElm=arguments[1];
//返回值
varisSuccess=false;
//表格对象
varmyTable;
if(Elm==undefined){
Elm=event.srcElement;
}
while(Elm&&Elm.tagName!="TR"){
Elm=Elm.parentElement;
}
//当前行号
varx=Elm.rowIndex;
//获取表格对象
myTable=Elm.parentElement;
if(myTable.tagName!='TABLE'){
myTable=myTable.parentNode;
}
vartableLength=myTable.rows.length;
//移到下一行
if(x<tableLength-minRowIndex-1){
moveCell(myTable,x,x+1);
isSuccess=true;
}
returnisSuccess;
}
/**
*行交换，处理了checkbox丢值的问题
*
*myTable表格对象
*a行号
*b行号
*/
functionmoveCell(myTable,a,b){
vare2=myTable.rows[a].all.tags("input");
vare3=myTable.rows[b].all.tags("input");
vararr=[];
//遍历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目标替换的单元格
*
*/
functioncloneStyle(){
//单元格中对象
vartdObj=arguments[0];
//合并列数
vartargetTdObj=arguments[1];
//克隆传入的对象
vartempObj=tdObj.cloneNode(false);
//克隆目标对象
vartargetHtml=targetTdObj.innerHTML;
//横向合并的个数
varcolspan=targetTdObj.colSpan;
//纵向合并的个数
varrowspan=targetTdObj.rowSpan;
//宽度
varwidth=targetTdObj.width;
//行对象
varrowObj=tdObj.parentNode;
//替换当前单元格
rowObj.replaceChild(tempObj,targetTdObj);
//for(vari=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是否保留每个单元格的值
*/
functioncombineCell(){
//单元格中对象
varobj=arguments[0];
//合并列数
varcolspan=arguments[1]==undefined?1:arguments[1];
//合并的行数
varrowspan=arguments[2]==undefined?1:arguments[2];
//是否保留每个单元格的值
varkeepFlag=arguments[3]==undefined?false:arguments[3];
varelementObjs=newArray();
vartdObj=obj.tagName!='TD'?obj.parentNode:obj;
vartrObj=tdObj.parentNode;
vartableObj=trObj.parentNode;
if(tableObj.tagName!='TABLE'){
tableObj=tableObj.parentNode;
}
//当前单元格的原来的格式
varcolIndex=tdObj.cellIndex;
varrowIndex=trObj.rowIndex;
//
//varcolIndexs;
//if(rowspan>1){
//colIndexs=doFetchBaseCols(tableObj,doGetColIndex(obj));
//}
for(vari=colspan-1;i>0;i--){
//alert("i+colIndex="+(i+colIndex));
//alert("trObj.cells.length="+trObj.cells.length);
vartempObj=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(vari=elementObjs.length-1;i>-1;i--){
vartempObj=elementObjs[i];
for(varj=0;j<tempObj.childNodes.length;j++){
tdObj.appendChild(tempObj.childNodes[j]);
}
}
}
}
/**
*对表格新增一行
*
*tableObj被新增的表格对象
*htmlArr添加内容对象数组，
*htmlCols每个td的元素对应的colSpan参数，为空则获取之前的Tr信息，否则根据htmlCols生成
*rowIndex行号默认方式在最后一行新增行，从零开始
*
*返回新增成功、失败
*/
functioninsertTableRow(){
//表格对象
vartableObj=arguments[0];
//增加对象集
varhtmlArr=arguments[1];
//元素的TD的colSpan属性
varhtmlCols=arguments[2]==undefined?newArray():arguments[2];
//增加的行位置
varrowIndex=arguments[3];
//根据当前table表的行数，进行参数的处理
if(tableObj==undefined||tableObj.rows==undefined){
rowIndex=0;
}elseif(rowIndex==undefined||rowIndex>tableObj.rows.length){
rowIndex=tableObj.rows.length;
}
//新增行成功标志，默认失败
varisSuccess=doCheckPara(tableObj,htmlArr,htmlCols,rowIndex);
if(isSuccess){
//新增行
//alert("tableObj="+tableObj.rows.length+"\nrowIndex="+rowIndex);
//alert("htmlArr.length="+htmlArr.length);
varnewTrObj=tableObj.insertRow(rowIndex);
for(vari=0;i<htmlArr.length;i++){
varcellObj=newTrObj.insertCell(i);
//判断传入参数不为空，添加对象
if(htmlArr[i]!=undefined&&htmlArr[i]!=null){
if(htmlArr[i].constructor==Array){
varchildHtmlArr=htmlArr[i];
for(vark=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;
}
returnisSuccess;
}
/**
*对表格新增一行
*
*tableObj被新增的表格对象
*htmlArr添加内容对象数组，
*htmlRows每个td的元素对应的rowSpan参数，为空则获取之前的Td信息，否则根据htmlRows生成
*colIndex行号默认方式在最后一列新增列(此处的指定列进行插入，在表格中存在rowSpan!=1的情况下会有有问题)，从零开始
*
*返回新增成功、失败
*/
functioninsertTableCol(){
//表格对象
vartableObj=arguments[0];
//增加对象集
varhtmlArr=arguments[1];
//元素的TD的rowSpan属性
varhtmlRows=arguments[2]==undefined?newArray():arguments[2];
//增加的列位置
varcolIndex=arguments[3];
//alert(colIndex);
varbaseHtmlCols=doFetchBaseCols(tableObj,colIndex);
//判断返回为undefined，则表示当前不可进行插入操作
if(baseHtmlCols==undefined){
returnfalse;
}
//新增行成功标志，默认失败
varisSuccess=doCheckPara(tableObj,htmlArr,htmlRows,colIndex,false,baseHtmlCols);
if(isSuccess){
//新增行
varrowSpanCount=0;
varrowIndex=0;
//alert("htmlArr.length="+htmlArr.length);
for(vari=0,rowIndex=0;rowIndex<tableObj.rows.length&&rowIndex<htmlArr.length;i++){
vartrObj=tableObj.rows[rowIndex];
varindex=baseHtmlCols[rowIndex];
varcellObj=trObj.insertCell(index);
//判断传入参数不为空，添加对象
if(htmlArr[i]!=undefined&&htmlArr[i]!=null){
if(htmlArr[i].constructor==Array){
varchildHtmlArr=htmlArr[i];
for(vark=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;
}
returnisSuccess;
}
/**
*获取表格中一行的元素，对象数组，返回单元格对象数组、单元格的第一个子对象数组
*
*tableObj表格对象
*rowIndex获取的行号，从零开始
*isCopy获取copy对象，默认为false，不进行copy
*isCellObj获取单元格对象数组标志，,默认为false,返回单元格的子对象
*/
functiondoGetRowObj(){
varobjArr=newArray();
//表格对象
vartableObj=arguments[0];
//增加对象集
varrowIndex=arguments[1];
//是否获取COPY对象
varisCopy=arguments[2]==undefined?false:arguments[2];
//是否为单元格对象
varisCellObj=arguments[3]==undefined?false:arguments[3];
//c判断为当前为拷贝时
if(isCopy){
//varcopyTable=document.body.createTextRange();
//copyTable.moveToElementText(tableObj);
varmemeoryTable=tableObj.cloneNode(true);
tableObj=memeoryTable;
}
//判断对象为空或者不是一个表格对象时
if(tableObj==undefined||tableObj.tagName!="TABLE"){
alert("传入表格(tableObj)不是一个对象或表格！");
returnobjArr;
}
//判断表格内容为空时
if(tableObj.rows==undefined||tableObj.rows.length==0){
alert("当前表格对象为空！");
returnobjArr;
}
//判断要读取的行参数为空
if(rowIndex==undefined){
alert("未指名获取的行号！");
returnobjArr;
}
//判断当前要获取的行超过表格对象的范围
if(rowIndex<0||rowIndex>=tableObj.rows.length){
alert("要获取的行号不在当前的表格对象内！");
returnobjArr;
}
//进行行内容提取，返回对象
varrowObj=tableObj.rows[rowIndex];
for(vari=0;i<rowObj.cells.length;i++){
varcellObj=rowObj.cells[i];
varobjCopy;
//返回当前单元格
if(isCellObj){
objCopy=cellObj;
}
else{
objCopy=cellObj.childNodes!=undefined?cellObj.childNodes[0]:undefined;
}
objArr[i]=objCopy;
}
returnobjArr;
}
/**
*进行列或者行插入前的check，如果默认的colSpan与rowSpan不存在则根据行去前一行、列取前一列的思路获取默认值
*
*tableObj表格对象
*htmlArr内容对象数组，
*htmlSpan元素的TD的colSpan、rowSpan属性
*index行号增加的行、列位置，从零开始
*/
functiondoCheckPara(){
//表格对象
vartableObj=arguments[0];
//增加对象集
varhtmlArr=arguments[1];
//元素的TD的colSpan、rowSpan属性
varhtmlSpan=arguments[2];
//增加的行、列位置
varindex=arguments[3];
//alert("tableObj="+tableObj+"\nhtmlArr.length="+htmlArr.length+"\nhtmlSpan.length="+htmlSpan.length+"\nindex="+index);
//新增列、行标志，默认为行追加
varisRowInsert=arguments[4]==undefined?true:false;
varbaseHtmlCols=arguments[5];
//新增行成功标志，默认失败
varisSuccess=false;
if(tableObj==undefined||tableObj.tagName!="TABLE"){
alert("传入表格(tableObj)不是一个对象或表格！");
returnisSuccess;
}
//传入的为表格
else{
//验证逻辑上的错误
if(htmlArr==undefined){
alert("传入的对象数组(htmlArr)为空或未定义！");
returnisSuccess;
}elseif(htmlSpan.length>0&&htmlSpan.length!=htmlArr.length){
alert("传入的属性(htmlCols)与增加对象集(htmlArr)的长度不等！");
returnisSuccess;
}
//行追加
if(isRowInsert){
vartableRowLength=tableObj.rows!=undefined?tableObj.rows.length:0;
//设置初始值
//设置元素对应的colSpan的属性，默认取当前要插入行的前一行的属性
if(htmlSpan.length==0&&index>0&&index<tableRowLength){
//获取临近一行对象
varlastTrObj=tableObj.rows[index-1];
//获取默认TD样式与当前存入元素不对应，无法插入
if(lastTrObj.childNodes.length!=htmlArr.length){
alert("插入失败，获取默认单元格的colSpan属性的个数与传入对象的个数不相等！");
returnisSuccess;
}else{
for(vari=0;i<lastTrObj.childNodes.length;i++){
varcellObj=lastTrObj.childNodes[i];
//列属性
htmlSpan[i]=cellObj.colSpan!=undefined?cellObj.colSpan:"1";
}
}
}
}
//列追加时
else{
vartableRowLength=tableObj.rows!=undefined?tableObj.rows.length:0;
if(index!=undefined&&index>0&&htmlSpan.length==0){
for(vari=0,k=0;i<tableRowLength;i++){
if(baseHtmlCols[i]!=undefined&&baseHtmlCols[i]>0){
varlastTrObj=tableObj.rows[i];
//alert("baseHtmlCols[i]="+baseHtmlCols[i]);
//alert("lastTrObj.cells.length="+lastTrObj.cells.length);
varlastTdRowSpan=lastTrObj.cells[parseInt(baseHtmlCols[i])-1].rowSpan;
htmlSpan[k++]=lastTdRowSpan;
}
}
if(htmlSpan.length!=htmlArr.length){
alert("插入失败，获取默认单元格的rowSpan属性的个数与传入对象的个数不相等！");
returnisSuccess;
}
}
}
}
isSuccess=true;
returnisSuccess;
}
/**
*获取表格在指定列在实际行中位置
*
*tableObj表格对象（必须项）
*index指定的列，数值（必须项），从零开始
*
*returnbaseHtmlCols行中指定列的实际位置，一般情况下返回一个数组，出错时返回一个undefined对象
*/
functiondoFetchBaseCols(){
vartableObj=arguments[0];
varindex=arguments[1];
varnoAlert=arguments[2]==undefined?false:arguments[2];
//需要返回的行实际位置
varbaseHtmlCols=newArray();
//alert("tableObj="+tableObj);
//获取初始值，指定的列
for(vari=0;i<tableObj.rows.length;i++){
baseHtmlCols[i]=index;
}
if(index!=0){
//进行值获取
for(vari=0;i<tableObj.rows.length;i++){
varrow=tableObj.rows[i];
//默认插入列
if(index==undefined){
baseHtmlCols[i]=row.cells.length;
}
//生成实际的列值
else{
varcolsIndex=0;
//计算当前行的个数
for(varj=0;j<row.cells.length;j++){
if(j==baseHtmlCols[i]){
break;
}
varcell=row.cells[j];
//合并的行数
varrowSpanIndex=cell.rowSpan!=undefined?cell.rowSpan:0;
//合并的列数
varcolSpanIndex=cell.colSpan!=undefined?cell.colSpan:1;
//将当前行减去该TD的colspan参数的影响
baseHtmlCols[i]=baseHtmlCols[i]-(colSpanIndex-1);
//循环行，将当前合并的列影响到的列，均调整相应的个数
for(vark=1;k<rowSpanIndex;k++){
baseHtmlCols[i+k]=baseHtmlCols[i+k]-colSpanIndex;
}
//判断当前指定的列被跳过，因为当前列已经被合并
if(j+(colSpanIndex-1)>baseHtmlCols[i]){
if(!noAlert){
alert("遍历到第"+i+"行时，因为当前插入的列包含在第"+j+"列合并的单元格内，无法在此处进行操作！");
}
returnundefined;
}
//判断当前行遍历到指定的列时
elseif(j==baseHtmlCols[i]){
break;
}
}
}
}
}
returnbaseHtmlCols;
}
/**
*根据表格的一个td的子项，返回当前对象所在列的每个单元格对应的行的位置
*
*obj传入的表格中某个td的一个子对象
*isComplexTable是否复杂表格标志，默认下都使用false，
1、简单表格，根据该单元格之前的部分就能计算出当前列在表格中的绝对位置的，就设置成false，或者不定义
2、针对删除的单元格所在的行存在受之前行中单元格的rowspan与colspan影响，而使得得到的colIndex列的绝对位置
*
*返回一个长度为表格的行个数，存有该列在每行中的位置
*
*缺陷，如果表格比较复杂，页面上显示的一列但是在实际行中不是相等的位置
*/
functiondoGetColIndex(obj){
varobj=arguments[0];
varisComplexTable=arguments[1]==undefined?false:arguments[1];
vartdObj=obj.parentNode;
vartrObj=tdObj.parentNode;
vartableObj=trObj.parentNode;
if(tableObj.tagName!='TABLE'){
tableObj=tableObj.parentNode;
}
//当前行下的第几列
varcolIndex=tdObj.cellIndex;
//当前行是第几行
varrowIndex=trObj.rowIndex;
//定义一个需要返回的值
vararrColsIndex;
//alert("colIndex="+colIndex);
//alert("rowIndex="+rowIndex);
//alert("isComplexTable="+isComplexTable);
if(isComplexTable){
for(vari=0;true;i++){
arrColsIndex=doFetchBaseCols(tableObj,i);
if(arrColsIndex!=undefined){
if(arrColsIndex[rowIndex]==colIndex){
break;
}elseif(arrColsIndex[rowIndex]>colIndex){
alert("出错当前方法不支持合并列的操作！");
returnundefined;
}
}
}
}else{
for(vari=colIndex-1;i>-1;i--){
//alert("colIndex="+colIndex);
varChildObj=trObj.cells[i];
varcolspanIndex=ChildObj.colSpan-1;
//alert("colspanIndex="+colspanIndex);
colIndex=colIndex+colspanIndex;
}
//alert('begin');
//alert("colIndex="+colIndex);
arrColsIndex=doFetchBaseCols(tableObj,colIndex);
}
returnarrColsIndex;
}
/**
*获取删除当前行，影响到单元格rowSpan属性的单元格集，此处只能遍历到该行之前的受影响的单元格；如果当前行存在rowSpan属性存在大于1的，本方法未遍历到
*
*tableObj表格对象（必须项）
*index指定的行，数值（必须项）
*
*returneffectCells，一般情况下返回一个数组，出错时返回一个undefined对象
*/
functiondoFetchEffectCells(){
vartableObj=arguments[0];
varindex=arguments[1];
//插入当前会影响到rowSpan属性的单元格对象集
vareffectCells=newArray();
//判断新增的行在表格的中间时
if(index>0&&index<tableObj.rows.length){
for(vari=0,k=0;i<index;i++){
varrow=tableObj.rows[i];
for(varj=0;j<row.cells.length;j++){
varcellObj=row.cells[j];
varrowSpanIndex=cellObj.rowSpan!=undefined?cellObj.rowSpan:1;
if(i+rowSpanIndex>index){
effectCells[k++]=cellObj;
}
}
}
}
returneffectCells;
}
希望本文所述对大家JavaScript程序设计有所帮助。
js操作table元素实现表格行列新增、删除技巧总结

热门推荐

随机推荐
