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

