蝙蝠岛资源网 Design By www.hbtsch.com
本文实例讲述了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对象
*/
function doTableRowDelete(){
var tablObj = arguments[0];
var trIndexs = arguments[1];
var tdCount = arguments[2]==undefined",");
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",");
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"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"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"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"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"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"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"tableObj="+tableObj+"\nhtmlArr.length="+htmlArr.length+"\nhtmlSpan.length="+htmlSpan.length+"\nindex="+index);
//新增列、行标志,默认为行追加
var isRowInsert = arguments[4]==undefined"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"插入失败,获取默认单元格的colSpan属性的个数与传入对象的个数不相等!");
return isSuccess;
}else {
for(var i=0;i<lastTrObj.childNodes.length;i++){
var cellObj = lastTrObj.childNodes[i];
//列属性
htmlSpan[i] = cellObj.colSpan!=undefined"1";
}
}
}
}
//列追加时
else{
var tableRowLength = tableObj.rows!=undefined"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"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"遍历到第"+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"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;
}
希望本文所述对大家JavaScript程序设计有所帮助。
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无js操作table元素实现表格行列新增、删除技巧总结的评论...
《魔兽世界》大逃杀!60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容,新游玩模式《强袭风暴》即将于3月21 日在亚服上线,届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕,并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时,他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中,玩家将会进入一个全新的海盗主题大逃杀式限时活动,其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场,作为一个独立于主游戏之外的活动,玩家可以用大逃杀的风格来体验《魔兽世界》,不分职业、不分装备(除了你在赛局中捡到的),光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式,玩家在加入海盗主题的预赛大厅区域前,可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹,《巨龙崛起》和《魔兽世界:巫妖王之怒 经典版》的玩家都可以获得奖励。
更新日志
2025年10月26日
2025年10月26日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]