js操作table元素表格的行列新增删除汇集文档格式.docx
《js操作table元素表格的行列新增删除汇集文档格式.docx》由会员分享，可在线阅读，更多相关《js操作table元素表格的行列新增删除汇集文档格式.docx（34页珍藏版）》请在冰点文库上搜索。
赋值单元格样式******
【一】、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;
}
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;
*删除表格的列
functiondoTableColDelete（）{
varisDeleteFlag=false;
vartdCount=arguments[0]==undefined?
parseFloat（arguments[0]）;
while（tdCount!
=0）{
vartrObj=tdObj.parentNode;
vartableObj=trObj.parentNode;
*根据Span外最临近的TD的宽度计算重置当前Span的宽度
*obj可以是页面上一个容器对象，TR、TD、TABLE，此项为空，则会遍历页面上所有的Span对象
functioncalculateSpanWidth（）{
varobj=arguments[0];
varspanObjs;
if（obj!
=undefined）{
spanObjs=obj.getElementsByTagName（'
span'
spanObjs=document.getElementsByTagName（'
spanObjs.length;
vartdObj=spanObjs[i].parentNode;
while（tdObj.tagName!
='
&
typeof（tdObj）=='
Object'
if（tdObj.tagName=='
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?
arguments[3];
varcolsArr=combainCols.split（"
varcols=newArray（）;
varindex=0;
colsArr.length;
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;
tableObj.rows.length;
varrow=tableObj.rows[i];
for（vark=cols.length-1;
k>
=0;
k--）{
varj=cols[k];
if（modelArr[j]==undefined）{
modelArr[j]=row.cells[j];
if（row.cells[j].outerText==modelArr[j].outerText）{
modelArr[j].rowSpan=modelArr[j].rowSpan+1;
row.deleteCell（j）;
*行上移
*minRowIndex向上移动到的最小行号，默认时零
*Elm可以缺省，如果当前需要移动的行与激发本函数的位置有比较复杂的关系时，需要自行指名tr对象或者当前行的td对象传入
*返回，移动成功返回true，如果当前时第minRowIndex行则返回false
functionmoveUp（）{
//传入的对象
varminRowIndex=arguments[0]==undefined?
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!
myTable=myTable.parentNode;
//移到上一行
if（x>
minRowIndex）{
moveCell（myTable,x,x-1）;
isSuccess=true;
returnisSuccess;
*行下移
*minRowIndex向下移动到表格的倒数几行，默认是零，即表格的最后一行
*返回，移动成功返回true，如果当前时最后一行则返回false
functionmoveDown（）{
vartableLength=myTable.rows.length;
//移到下一行
if（x<
tableLength-minRowIndex-1）{
moveCell（myTable,x,x+1）;
*行交换，处理了checkbox丢值的问题
*myTable表格对象
*a行号
*b行号
functionmoveCell（myTable,a,b）{
vare2=myTable.rows[a].all.tags（"
input"
vare3=myTable.rows[b].all.tags（"
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控件
e3.length;
if（e3[i].type=="
arr.push（e3[i],e3[i].checked）;
myTable.moveRow（a,b）;
//对数组中所有元素获得对象并对引用的对象赋原值
while（arr.length>
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;
targetObj.childNodes.length;
//tempObj.appendChild（targetObj.childNodes[i]）;
//}
tempObj.innerHTML=targetHtml;
tempObj.colSpan=colspan;
tempObj.rowSpan=rowspan;
tempObj.width=width;
*合并单元格,TODO:
行合并暂未实现
*obj单元格中对象
*colspan合并列数
*rowspan合并的行数
*keepFlag是否保留每个单元格的值
functioncombineCell（）{
varcolspan=arguments[1]==undefined?
arguments[1];
//合并的行数
varrowspan=arguments[2]==undefined?
//是否保留每个单元格的值
varkeepFlag=arguments[3]==undefined?
false:
varelementObjs=newArray（）;
vartdObj=obj.tagName!
?
obj.parentNode:
obj;
if（tableObj.tagName!
//当前单元格的原来的格式
varcolIndex=tdObj.cellIndex;
//
//varcolIndexs;
//if（rowspan>
1）{
//colIndexs=doFetchBaseCols（tableObj,doGetColIndex（obj））;
for（vari=colspan-1;
0;
//alert（"
i+colIndex="
+（i+colIndex））;
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;
keepFlag="
升级会员 