js操作table元素表格的行列新增删除汇集.docx
- 文档编号:12614015
- 上传时间:2023-04-20
- 格式:DOCX
- 页数:34
- 大小:23.83KB
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;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 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 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 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 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 if(e2[i].type=="checkbox"){ //对所有checkbox控件添加到数组中 arr.push(e2[i],e2[i].checked); } } //遍历b行的所有input控件 for(i=0;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 //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="
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- js 操作 table 元素 表格 行列 新增 删除 汇集