js操作table元素實現(xiàn)表格行列新增、刪除技巧總結(jié)
更新時間:2015年11月18日 09:50:38 作者:mile
這篇文章主要介紹了js操作table元素實現(xiàn)表格行列新增、刪除技巧,以實例形式分析總結(jié)了JavaScript針對table表格進行行列的增加與刪除相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了js操作table元素實現(xiàn)表格行列新增、刪除的方法。分享給大家供大家參考,具體如下:
/************ TableTool.js ******************************************************************************************************************
************************************************************** 快速索引 ***************************************************************
表格行、列刪除
【一】、 doTableRowDelete 說明:默認根據(jù)當(dāng)前事件指向的對象,向上尋找TR,進行刪除(可選參數(shù):表格對象;刪除的行的行號,按升序方式以逗號分割,如2,3,5;向上遍歷TD幾次,默認為1次)
合并表格 ******
【一】、 conbainTableRow 說明:縱向單元格的內(nèi)容相同的合并,傳入表格對象,需要合并的列,(可選的參數(shù),從第幾行開始);
【二】、 combineCell 說明:橫向單元格合并,傳入單元格內(nèi)一對象,(可選的參數(shù),合并幾個單元格<向右>;是否保留原單元格的值);
單元格與行的移動 ******
【一】、 moveUp 說明:進行上移,(可選參數(shù),最上移動到第幾行,默認為第零行;需要移動的行或者td對象或者td內(nèi)的子對象,默認獲取當(dāng)前事件指向的行)
【二】、 moveDown 說明:進行下移,(可選參數(shù),最低移動到倒數(shù)第幾行,默認為倒數(shù)第零行;需要移動的行或者td對象或者td內(nèi)的子對象,默認獲取當(dāng)前事件指向的行)
【三】、 moveCell 說明:行交換,表格對象、交換的行的行號
賦值單元格樣式 ******
【一】、 cloneStyle 說明:將模板單元格的樣式COPY到目標(biāo)單元格上,模板單元格,要修正樣式的單元格
新增行、列 ******
【一】、 insertTableRow 說明:新增行,表格對象,添加行的內(nèi)容的數(shù)組(可選參數(shù),每個單元格的colSpan的數(shù)組參數(shù),默認取前一行的屬性; 添加到的行的行號,默認是最后一行)
【二】、 insertTableCol 說明:新增列,表格對象,添加行的內(nèi)容的數(shù)組(可選參數(shù),每個單元格的rowSpan的數(shù)組參數(shù),默認取前一列的屬性;添加到的列的列號,默認是最后一列)
獲取表格中一行的元素 ******
【一】、 doGetRowObj 說明: 獲取表格中行內(nèi)的元素 ,表格對象,行號,(可選參數(shù),是否copy對象,默認為false;是否獲取單元格對象,默認false)
其他驗證與參數(shù)獲取 ******
【一】、 doFetchBaseCols 說明:獲取列號在表格內(nèi)行中的實際位置,表格對象,列號;返回一個數(shù)組,記錄每行中指定的單元格的cellIndex
【二】、 doFetchEffectCells 說明:獲取插入當(dāng)前行,被影響到rowSpan屬性的單元格集合
【三】、 calculateSpanWidth 說明:計算Span的寬度,根據(jù)當(dāng)前span外的單元格的寬度,(可選參數(shù):容器對象,容器對象為空時,取當(dāng)前document,即遍歷頁面上所有的Span對象)
*******************************************************************************************************************************************
***********************************************************************************************************************************************/
/**
* 刪除表格的行
*
* tdCount 根據(jù)當(dāng)前event事件向上追溯TD對象幾次,默認為1次
*
* 說明:event事件需要附著在將要刪除的TD內(nèi)部,且不能有多重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;i<effectCells.length;i++){
effectCells[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 根據(jù)當(dāng)前event事件向上追溯TD對象幾次,默認為1次
*
* 說明:event事件需要附著在將要刪除的TD內(nèi)部,且不能有多重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;
}
}
var trObj = tdObj.parentNode;
var tableObj = trObj.parentNode;
var cellIndex = tdObj.cellIndex;
var rowIndex = trObj.rowIndex;
tableObj.deleteRow(rowIndex);
isDeleteFlag = true;
return isDeleteFlag;
}
/**
* 根據(jù)Span外最臨近的TD的寬度計算重置當(dāng)前Span的寬度
*
* obj 可以是頁面上一個容器對象,TR、TD、TABLE,此項為空,則會遍歷頁面上所有的Span對象
*/
function calculateSpanWidth(){
var obj = arguments[0];
var spanObjs;
if(obj!=undefined){
spanObjs = obj.getElementsByTagName('span');
}else{
spanObjs = document.getElementsByTagName('span');
}
for(var i=0;i<spanObjs.length;i++){
var tdObj = spanObjs[i].parentNode;
while(tdObj.tagName!='TD'&&typeof(tdObj)=='Object'){
tdObj = tdObj.parentNode;
}
if(tdObj.tagName=='TD'){
var offsetWidth = tdObj.offsetWidth;
spanObjs[i].style.width = offsetWidth-5;
}
}
}
/**
* 合并表格中縱向相鄰單元格的內(nèi)容相同的項
*
* tableObj 表格對象(必須)
* combainCols 需要合并的列 (格式:從小到大,連續(xù)的用-分割,獨立的用逗號; 例如:1-5,7,9)
* beginRowIndex 從第幾行開始合并, 默認從第零行開始
*/
function conbainTableRow(){
var tableObj = arguments[0];
var combainCols = arguments[1];
var beginRowIndex = arguments[2]==undefined?0:arguments[2];
//var beginColIndex = arguments[3]==undefined?0:arguments[3];
var colsArr = combainCols.split(",");
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 可以缺省,如果當(dāng)前需要移動的行與激發(fā)本函數(shù)的位置有比較復(fù)雜的關(guān)系時,需要自行指名tr對象或者當(dāng)前行的td對象傳入
*
* 返回,移動成功返回true,如果當(dāng)前時第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;
}
//當(dāng)前行號
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 向下移動到表格的倒數(shù)幾行,默認是零,即表格的最后一行
* Elm 可以缺省,如果當(dāng)前需要移動的行與激發(fā)本函數(shù)的位置有比較復(fù)雜的關(guān)系時,需要自行指名tr對象或者當(dāng)前行的td對象傳入
*
* 返回,移動成功返回true,如果當(dāng)前時最后一行則返回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;
}
//當(dāng)前行號
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控件添加到數(shù)組中
arr.push(e2[i], e2[i].checked);
}
}
//遍歷b行的所有input控件
for(i = 0; i < e3.length; i++) {
if(e3[i].type == "checkbox"){
//對所有checkbox控件添加到數(shù)組中
arr.push(e3[i], e3[i].checked);
}
}
myTable.moveRow(a, b);
//對數(shù)組中所有元素獲得對象并對引用的對象賦原值
while(arr.length > 0){
arr.shift().checked = arr.shift();
}
}
/**
*替換單元格的樣式為傳入的單元格樣式
*
*tdObj 模板單元格
*targetTdObj 目標(biāo)替換的單元格
*
*/
function cloneStyle(){
//單元格中對象
var tdObj = arguments[0];
//合并列數(shù)
var targetTdObj = arguments[1];
//克隆傳入的對象
var tempObj = tdObj.cloneNode(false);
//克隆目標(biāo)對象
var targetHtml = targetTdObj.innerHTML;
//橫向合并的個數(shù)
var colspan = targetTdObj.colSpan;
//縱向合并的個數(shù)
var rowspan = targetTdObj.rowSpan;
//寬度
var width = targetTdObj.width;
//行對象
var rowObj = tdObj.parentNode;
//替換當(dāng)前單元格
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:行合并暫未實現(xiàn)
*
* obj 單元格中對象
* colspan 合并列數(shù)
* rowspan 合并的行數(shù)
*keepFlag 是否保留每個單元格的值
*/
function combineCell(){
//單元格中對象
var obj = arguments[0];
//合并列數(shù)
var colspan = arguments[1]==undefined?1:arguments[1];
//合并的行數(shù)
var rowspan = arguments[2]==undefined?1:arguments[2];
//是否保留每個單元格的值
var keepFlag = arguments[3]==undefined?false:arguments[3];
var elementObjs = new Array();
var tdObj = obj.tagName!='TD'?obj.parentNode:obj;
var trObj = tdObj.parentNode;
var tableObj = trObj.parentNode;
if(tableObj.tagName!='TABLE'){
tableObj = tableObj.parentNode;
}
//當(dāng)前單元格的原來的格式
var colIndex = tdObj.cellIndex;
var rowIndex = trObj.rowIndex;
//
//var colIndexs;
//if(rowspan>1){
// colIndexs = doFetchBaseCols(tableObj,doGetColIndex(obj));
//}
for(var i=colspan-1;i>0;i--){
//alert("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添加內(nèi)容對象數(shù)組,
* htmlCols 每個td的元素對應(yīng)的colSpan參數(shù),為空則獲取之前的Tr信息,否則根據(jù)htmlCols生成
* rowIndex 行號 默認方式在最后一行新增行,從零開始
*
*返回新增成功、失敗
*/
function insertTableRow(){
//表格對象
var tableObj = arguments[0];
//增加對象集
var htmlArr = arguments[1];
//元素的TD的colSpan屬性
var htmlCols = arguments[2]==undefined?new Array():arguments[2];
//增加的行位置
var rowIndex = arguments[3];
//根據(jù)當(dāng)前table表的行數(shù),進行參數(shù)的處理
if(tableObj==undefined||tableObj.rows==undefined){
rowIndex = 0;
}else if(rowIndex==undefined||rowIndex>tableObj.rows.length){
rowIndex = tableObj.rows.length;
}
//新增行成功標(biāo)志,默認失敗
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;i<htmlArr.length;i++){
var cellObj = newTrObj.insertCell(i);
//判斷傳入?yún)?shù)不為空,添加對象
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 添加內(nèi)容對象數(shù)組,
* htmlRows 每個td的元素對應(yīng)的rowSpan參數(shù),為空則獲取之前的Td信息,否則根據(jù)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,則表示當(dāng)前不可進行插入操作
if(baseHtmlCols==undefined){
return false;
}
//新增行成功標(biāo)志,默認失敗
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;rowIndex<tableObj.rows.length&&rowIndex<htmlArr.length;i++){
var trObj = tableObj.rows[rowIndex];
var index = baseHtmlCols[rowIndex];
var cellObj = trObj.insertCell(index);
//判斷傳入?yún)?shù)不為空,添加對象
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");
//跳過已經(jīng)被合并的行
rowIndex = rowIndex + (htmlRows[i]!=undefined?parseFloat(htmlRows[i]):1);
//alert(rowIndex);
}
isSuccess = true;
}
return isSuccess;
}
/**
*獲取表格中一行的元素,對象數(shù)組,返回單元格對象數(shù)組、單元格的第一個子對象數(shù)組
*
* tableObj 表格對象
* rowIndex 獲取的行號 ,從零開始
* isCopy 獲取copy對象,默認為false,不進行copy
* isCellObj 獲取單元格對象數(shù)組標(biāo)志,,默認為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判斷為當(dāng)前為拷貝時
if(isCopy){
//var copyTable = document.body.createTextRange();
//copyTable.moveToElementText(tableObj);
var memeoryTable = tableObj.cloneNode(true);
tableObj = memeoryTable;
}
//判斷對象為空或者不是一個表格對象時
if(tableObj==undefined || tableObj.tagName!="TABLE"){
alert("傳入表格(tableObj)不是一個對象或表格!");
return objArr;
}
//判斷表格內(nèi)容為空時
if(tableObj.rows==undefined||tableObj.rows.length==0){
alert("當(dāng)前表格對象為空!");
return objArr;
}
//判斷要讀取的行參數(shù)為空
if(rowIndex==undefined){
alert("未指名獲取的行號!");
return objArr;
}
//判斷當(dāng)前要獲取的行超過表格對象的范圍
if(rowIndex<0 || rowIndex>=tableObj.rows.length){
alert("要獲取的行號不在當(dāng)前的表格對象內(nèi)!");
return objArr;
}
//進行行內(nèi)容提取,返回對象
var rowObj = tableObj.rows[rowIndex];
for(var i=0;i<rowObj.cells.length;i++){
var cellObj = rowObj.cells[i];
var objCopy;
//返回當(dāng)前單元格
if(isCellObj){
objCopy = cellObj;
}
else{
objCopy = cellObj.childNodes!=undefined?cellObj.childNodes[0]:undefined;
}
objArr[i] = objCopy;
}
return objArr;
}
/**
*進行列或者行插入前的check,如果默認的colSpan與rowSpan不存在則根據(jù)行去前一行、列取前一列的思路獲取默認值
*
* tableObj 表格對象
* htmlArr 內(nèi)容對象數(shù)組,
* 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);
//新增列、行標(biāo)志,默認為行追加
var isRowInsert = arguments[4]==undefined?true:false;
var baseHtmlCols = arguments[5];
//新增行成功標(biāo)志,默認失敗
var isSuccess = false;
if(tableObj==undefined||tableObj.tagName!="TABLE"){
alert("傳入表格(tableObj)不是一個對象或表格!");
return isSuccess;
}
//傳入的為表格
else{
//驗證邏輯上的錯誤
if(htmlArr==undefined){
alert("傳入的對象數(shù)組(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;
//設(shè)置初始值
//設(shè)置元素對應(yīng)的colSpan的屬性,默認取當(dāng)前要插入行的前一行的屬性
if(htmlSpan.length==0 && index>0 && index<tableRowLength){
//獲取臨近一行對象
var lastTrObj = tableObj.rows[index-1];
//獲取默認TD樣式與當(dāng)前存入元素不對應(yīng),無法插入
if(lastTrObj.childNodes.length!=htmlArr.length){
alert("插入失敗,獲取默認單元格的colSpan屬性的個數(shù)與傳入對象的個數(shù)不相等!");
return isSuccess;
}else {
for(var i=0;i<lastTrObj.childNodes.length;i++){
var 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;i<tableRowLength;i++){
if(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屬性的個數(shù)與傳入對象的個數(shù)不相等!");
return isSuccess;
}
}
}
}
isSuccess = true;
return isSuccess;
}
/**
*獲取表格在指定列在實際行中位置
*
*tableObj 表格對象 (必須項)
*index 指定的列,數(shù)值(必須項),從零開始
*
*return baseHtmlCols行中指定列的實際位置,一般情況下返回一個數(shù)組,出錯時返回一個undefined對象
*/
function doFetchBaseCols(){
var tableObj = arguments[0];
var index = arguments[1];
var noAlert = arguments[2]==undefined?false:arguments[2];
// 需要返回的行實際位置
var baseHtmlCols = new Array();
//alert("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;
//計算當(dāng)前行的個數(shù)
for(var j=0;j<row.cells.length;j++){
if(j==baseHtmlCols[i]){
break;
}
var cell = row.cells[j];
//合并的行數(shù)
var rowSpanIndex = cell.rowSpan!=undefined?cell.rowSpan:0;
//合并的列數(shù)
var colSpanIndex = cell.colSpan!=undefined?cell.colSpan:1;
//將當(dāng)前行減去該TD的colspan參數(shù)的影響
baseHtmlCols[i] = baseHtmlCols[i] - (colSpanIndex-1);
//循環(huán)行,將當(dāng)前合并的列影響到的列,均調(diào)整相應(yīng)的個數(shù)
for(var k=1;k<rowSpanIndex;k++){
baseHtmlCols[i+k] = baseHtmlCols[i+k] - colSpanIndex;
}
//判斷當(dāng)前指定的列被跳過,因為當(dāng)前列已經(jīng)被合并
if(j+(colSpanIndex-1) > baseHtmlCols[i]){
if(!noAlert){
alert("遍歷到第"+i+"行時,因為當(dāng)前插入的列包含在第"+j+"列合并的單元格內(nèi),無法在此處進行操作!");
}
return undefined;
}
//判斷當(dāng)前行遍歷到指定的列時
else if(j == baseHtmlCols[i]){
break;
}
}
}
}
}
return baseHtmlCols;
}
/**
* 根據(jù)表格的一個td的子項,返回當(dāng)前對象所在列的每個單元格對應(yīng)的行的位置
*
*obj 傳入的表格中某個td的一個子對象
*isComplexTable 是否復(fù)雜表格標(biāo)志,默認下都使用false,
1、簡單表格,根據(jù)該單元格之前的部分就能計算出當(dāng)前列在表格中的絕對位置的,就設(shè)置成false,或者不定義
2、針對刪除的單元格所在的行存在受之前行中單元格的rowspan與colspan影響,而使得得到的colIndex列的絕對位置
*
*返回一個長度為表格的行個數(shù),存有該列在每行中的位置
*
*缺陷,如果表格比較復(fù)雜,頁面上顯示的一列但是在實際行中不是相等的位置
*/
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;
}
//當(dāng)前行下的第幾列
var colIndex = tdObj.cellIndex;
//當(dāng)前行是第幾行
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("出錯當(dāng)前方法不支持合并列的操作!");
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;
}
/**
*獲取刪除當(dāng)前行,影響到單元格rowSpan屬性的單元格集,此處只能遍歷到該行之前的受影響的單元格;如果當(dāng)前行存在rowSpan屬性存在大于1的,本方法未遍歷到
*
*tableObj 表格對象 (必須項)
*index 指定的行,數(shù)值(必須項)
*
*return effectCells,一般情況下返回一個數(shù)組,出錯時返回一個undefined對象
*/
function doFetchEffectCells(){
var tableObj = arguments[0];
var index = arguments[1];
//插入當(dāng)前會影響到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程序設(shè)計有所幫助。
您可能感興趣的文章:
- vue.js+Element實現(xiàn)表格里的增刪改查
- JS對HTML表格進行增刪改操作
- JavaScript獲取表格(table)當(dāng)前行的值、刪除行、增加行
- Vue.js實現(xiàn)表格動態(tài)增加刪除的方法(附源碼下載)
- AngularJS實現(xiàn)表格的增刪改查(僅限前端)
- 純原生js實現(xiàn)table表格的增刪
- javascript實現(xiàn)動態(tài)增加刪除表格行(兼容IE/FF)
- 使用Bootstrap + Vue.js實現(xiàn)表格的動態(tài)展示、新增和刪除功能
- JavaScript實現(xiàn)動態(tài)增刪表格的方法
- javascript實現(xiàn)表格信息增添與刪除
相關(guān)文章
JavaScript高級程序設(shè)計 閱讀筆記(十七) js事件
IE中是冒泡型事件,即從最特定的事件目標(biāo)到最不特定的事件目標(biāo)2012-08-08
JavaScript選取(picking)和反選(rejecting)對象的屬性方法
這篇文章主要介紹了JavaScript選取(picking)和反選(rejecting)對象的屬性方法的相關(guān)資料,需要的朋友可以參考下2017-08-08
js實現(xiàn)拖拽效果(構(gòu)造函數(shù))
這篇文章主要介紹了js利用構(gòu)造函數(shù)實現(xiàn)拖拽效果2015-12-12
Electron中實現(xiàn)大文件上傳和斷點續(xù)傳功能
Electron是開源的框架,可以使用h5來開發(fā)跨平臺pc桌面應(yīng)用,這樣前端開發(fā)這可以開發(fā)桌面應(yīng)用了。這篇文章主要介紹了Electron中實現(xiàn)大文件上傳和斷點續(xù)傳功能,需要的朋友可以參考下2018-10-10
JS實現(xiàn)將手機號中間的幾位數(shù)字變成****功能
這篇文章主要介紹了用js如何實現(xiàn)將手機號中間的幾位數(shù)字變成****?_,今天,我們要實現(xiàn)一個很常見并且簡單的功能如何將手機號中間的幾位數(shù)變成****,需要的朋友可以參考下2023-09-09

