当前位置：文档之家› js操作table元素,表格的行列新增、删除汇集

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?1:parseFloat(arguments[2]);
if(trIndexs==undefined){
tdCount = tdCount-1;
var tdObj = event.srcElement;
var trObj,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;
}
var cellIndex = tdObj.cellIndex;
var rowIndex = trObj.rowIndex;
var effectCells = doFetchEffectCells(tableObj,rowIndex);
for(var i=0;ieffectCells[i].rowSpan = effectCells[i].rowSpan - 1;
}
tableObj.deleteRow(rowIndex);
}else{
var delIndexArr = trIndexs.split(",");
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?1:parseFloat(arguments[0]);
var tdObj = event.srcElement;
while(tdCount!=0){
tdCount--;
while(tdObj.tagName != 'TD'){
tdObj = tdObj.parentNode;
}
}

}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?0:arguments[0];
//传入的对象
var Elm = arguments[1];
//返回值
var isSuccess = false;
//表格对象
var myTable;
if(Elm==undefined){
Elm=event.srcElement;
}
while(Elm&&Elm.tagName!="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?0:arguments[0];
//传入的对象
var Elm = arguments[1];
//返回值
var isSuccess = false;
//表格对象
var myTable;
if(Elm==undefined){
Elm=event.srcElement;
}
while(Elm&&Elm.tagName!="TR"){
Elm=Elm.parentElement;
}
//当前行号
var x = Elm.rowIndex;
//获取表格对象
myTable = Elm.parentElement;
if(myTable.tagName!='TABLE'){
myTable = myTable.parentNode;
}

认失败
var isSuccess = doCheckPara(tableObj,htmlArr,htmlCols,rowIndex);
if(isSuccess){
//新增行
//alert("tableObj="+tableObj.rows.length+"\nrowIndex="+rowIndex);
//alert("htmlArr.length="+htmlArr.length);
var newTrObj = tableObj.insertRow(rowIndex);
for(var i=0;ivar cellObj = newTrObj.insertCell(i);
//判断传入参数不为空，添加对象
if(htmlArr[i]!=undefined && htmlArr[i]!=null){
if(htmlArr[i].constructor == Array){
var childHtmlArr = htmlArr[i];
for(var k=0;kif(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?new Array():arguments[2];
//增加的列位置
var colIndex = arguments[3];
//alert(colIndex);
var baseHtmlCols = doFetchBaseCols(tableObj,colIndex);
//判断返回为undefined，则表示当前不可进行插入操作
if(baseHtmlCols==undefined){
return false;
}
//新增行成功标志，默认失败
var isSuccess = doCheckPara(tableObj,htmlArr,htmlRows,colIndex,false,baseHtmlCols);

if(isSuccess){
//新增行
var rowSpanCount = 0;
var rowIndex = 0;

//alert("htmlArr.length="+htmlArr.length);
for(var i=0,rowIndex=0;rowIndexvar 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;kif(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;
}
return isSuccess;
}

/**
*获取表格中一行的元素，对象数组，返回单元格对象数组、单元格的第一个子对象数组
*
* tableObj 表格对象
* rowIndex 获取的行号，从零开始
* isCopy 获取copy对象，默认为false，不进行copy
* isCellObj 获取单元格对象数组标志，,默认为false,返回单元格的子对象
*/
function doGetRowObj(){
var objArr = new Array();
//表格对象
var tableObj = arguments[0];
//增加对象集
var rowIndex = arguments[1];
//是否获取COPY对象
var isCopy = arguments[2]==undefined?false:arguments[2];
//是否为单元格对象
var isCellObj = arguments[3]==undefined?false:arguments[3];

//c判断为当前为拷贝时
if(isCopy){
//var copyTable = document.body.createTextRange();
//copyTable.moveToElementText(tableObj);
var memeoryTable = tableObj.cloneNode(true);
tableObj = memeoryTable;
}
//判断对象为空或者不是一个表格对象时
if(tableObj==undefin

ed || tableObj.tagName!="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;ivar cellObj = rowObj.cells[i];
var objCopy;
//返回当前单元格
if(isCellObj){
objCopy = cellObj;
}
else{
objCopy = cellObj.childNodes!=undefined?cellObj.childNodes[0]:undefined;
}
objArr[i] = objCopy;
}
return objArr;
}

/**
*进行列或者行插入前的check，如果默认的colSpan与rowSpan不存在则根据行去前一行、列取前一列的思路获取默认值
*
* tableObj 表格对象
* htmlArr 内容对象数组，
* htmlSpan 元素的TD的colSpan、rowSpan属性
* index 行号增加的行、列位置，从零开始
*/
function doCheckPara(){
//表格对象
var tableObj = arguments[0];
//增加对象集
var htmlArr = arguments[1];
//元素的TD的colSpan、rowSpan属性
var htmlSpan = arguments[2];
//增加的行、列位置
var index = arguments[3];
//alert("tableObj="+tableObj+"\nhtmlArr.length="+htmlArr.length+"\nhtmlSpan.length="+htmlSpan.length+"\nindex="+index);
//新增列、行标志，默认为行追加
var isRowInsert = arguments[4]==undefined?true:false;
var baseHtmlCols = arguments[5];
//新增行成功标志，默认失败
var isSuccess = false;
if(tableObj==undefined||tableObj.tagName!="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?tableObj.rows.length:0;
//设置初始值
//设置元素对应的colSpan的属性，默认取当前要插入行的前一行的属性
if(htmlSpan.length==0 && index>0 && index//获取临近一行对象
var lastTrObj = tableObj.rows[index-1];
//获取默认TD样式与当前存入元素不对应，无法插入
if(lastTrObj.childNodes.length!=htmlArr.length){
alert("插入失败，获取默认单元格的colSpan属性的个数与传入对象的个数不相等！");
return isSuccess;
}else {
for(var i=0;ivar cellObj = lastTrObj.childNodes[i];
//列属性
htmlSpan[i] = cellObj.colSpan!=undefined?cellObj.colSpan:"1";
}
}
}
}
//列追加时
else{
var tableRowLength = tableObj.rows!=undefined?tableObj.rows.length:0;
if(index!=undefined && index>0 && htmlSpan.length==0){
for(var i=0,k=0;iif(baseHtmlCols[i]!=undefined && baseHtmlCols[i]>0){
var lastTrObj = tableObj.rows[i];
//alert("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对象
*/

e，
1、简单表格，根据该单元格之前的部分就能计算出当前列在表格中的绝对位置的，就设置成false，或者不定义
2、针对删除的单元格所在的行存在受之前行中单元格的rowspan与colspan影响，而使得得到的colIndex列的绝对位置
*
*返回一个长度为表格的行个数，存有该列在每行中的位置
*
*缺陷，如果表格比较复杂，页面上显示的一列但是在实际行中不是相等的位置
*/
function doGetColIndex(obj){
var obj = arguments[0];
var isComplexTable = arguments[1]==undefined?false:arguments[1];

var tdObj = obj.parentNode;
var trObj = tdObj.parentNode;
var tableObj = trObj.parentNode;
if(tableObj.tagName!='TABLE'){
tableObj = tableObj.parentNode;
}
//当前行下的第几列
var colIndex = tdObj.cellIndex;
//当前行是第几行
var rowIndex = trObj.rowIndex;
//定义一个需要返回的值
var arrColsIndex;
//alert("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 = arg

uments[1];
//插入当前会影响到rowSpan属性的单元格对象集
var effectCells = new Array();
//判断新增的行在表格的中间时
if(index>0&&indexfor(var i=0,k=0;ivar row = tableObj.rows[i];
for(var j=0;jvar cellObj = row.cells[j];
var rowSpanIndex = cellObj.rowSpan!=undefined?cellObj.rowSpan:1;
if(i+rowSpanIndex>index){
effectCells[k++] = cellObj;
}
}
}
}
return effectCells;
}