js操作table元素表格的行列新增删除汇集.docx
《js操作table元素表格的行列新增删除汇集.docx》由会员分享，可在线阅读，更多相关《js操作table元素表格的行列新增删除汇集.docx（34页珍藏版）》请在冰点文库上搜索。
js操作table元素表格的行列新增删除汇集
js操作table元素,表格的行列新增、删除汇集.txt你妈生你的时候是不是把人给扔了把胎盘养大？
别把虾米不当海鲜。
别把虾米不当海鲜。
js操作table元素,表格的行列新增、删除汇集.txt有谁会对着自己的裤裆傻笑。
不敢跟他说话却一遍一遍打开他的资料又关上。
用了心旳感情，真旳能让人懂得很多事。
╮如果有一天,我的签名不再频繁更新,那便证明我过的很好。
/************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;ieffectCells[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;ivartdObj=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;ivarindexChar=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;ivarrow=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（xmoveCell（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;iif（e2[i].type=="checkbox"）{
//对所有checkbox控件添加到数组中
arr.push（e2[i],e2[i].checked）;
}
}
//遍历b行的所有input控件
for（i=0;iif（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//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="
升级会员 