table elements_javascript 기술을 사용하여 js를 사용하여 테이블 행과 열을 추가하고 삭제하는 기술 요약
이 기사의 예에서는 js를 사용하여 테이블 요소를 조작하여 테이블 행과 열을 추가하고 삭제하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
/************ 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;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 根据当前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; } } var trObj = tdObj.parentNode; var tableObj = trObj.parentNode; var cellIndex = tdObj.cellIndex; var rowIndex = trObj.rowIndex; tableObj.deleteRow(rowIndex); isDeleteFlag = true; return isDeleteFlag; } /** * 根据Span外最临近的TD的宽度计算重置当前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; } } } /** * 合并表格中纵向相邻单元格的内容相同的项 * * tableObj 表格对象(必须) * combainCols 需要合并的列 (格式:从小到大,连续的用-分割,独立的用逗号; 例如: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 可以缺省,如果当前需要移动的行与激发本函数的位置有比较复杂的关系时,需要自行指名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 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?1:arguments[1]; //合并的行数 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; } //当前单元格的原来的格式 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添加内容对象数组, * htmlCols 每个td的元素对应的colSpan参数,为空则获取之前的Tr信息,否则根据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]; //根据当前table表的行数,进行参数的处理 if(tableObj==undefined||tableObj.rows==undefined){ rowIndex = 0; }else if(rowIndex==undefined||rowIndex>tableObj.rows.length){ rowIndex = tableObj.rows.length; } //新增行成功标志,默认失败 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); //判断传入参数不为空,添加对象 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?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;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?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==undefined || 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;i<rowObj.cells.length;i++){ var 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<tableRowLength){ //获取临近一行对象 var lastTrObj = tableObj.rows[index-1]; //获取默认TD样式与当前存入元素不对应,无法插入 if(lastTrObj.childNodes.length!=htmlArr.length){ alert("插入失败,获取默认单元格的colSpan属性的个数与传入对象的个数不相等!"); 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属性的个数与传入对象的个数不相等!"); 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?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; //计算当前行的个数 for(var j=0;j<row.cells.length;j++){ if(j==baseHtmlCols[i]){ break; } var cell = row.cells[j]; //合并的行数 var rowSpanIndex = cell.rowSpan!=undefined?cell.rowSpan:0; //合并的列数 var colSpanIndex = cell.colSpan!=undefined?cell.colSpan:1; //将当前行减去该TD的colspan参数的影响 baseHtmlCols[i] = baseHtmlCols[i] - (colSpanIndex-1); //循环行,将当前合并的列影响到的列,均调整相应的个数 for(var k=1;k<rowSpanIndex;k++){ baseHtmlCols[i+k] = baseHtmlCols[i+k] - colSpanIndex; } //判断当前指定的列被跳过,因为当前列已经被合并 if(j+(colSpanIndex-1) > baseHtmlCols[i]){ if(!noAlert){ alert("遍历到第"+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?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 = 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 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

웹 개발에서 JavaScript의 주요 용도에는 클라이언트 상호 작용, 양식 검증 및 비동기 통신이 포함됩니다. 1) DOM 운영을 통한 동적 컨텐츠 업데이트 및 사용자 상호 작용; 2) 사용자가 사용자 경험을 향상시키기 위해 데이터를 제출하기 전에 클라이언트 확인이 수행됩니다. 3) 서버와의 진실한 통신은 Ajax 기술을 통해 달성됩니다.

보다 효율적인 코드를 작성하고 성능 병목 현상 및 최적화 전략을 이해하는 데 도움이되기 때문에 JavaScript 엔진이 내부적으로 작동하는 방식을 이해하는 것은 개발자에게 중요합니다. 1) 엔진의 워크 플로에는 구문 분석, 컴파일 및 실행; 2) 실행 프로세스 중에 엔진은 인라인 캐시 및 숨겨진 클래스와 같은 동적 최적화를 수행합니다. 3) 모범 사례에는 글로벌 변수를 피하고 루프 최적화, Const 및 Lets 사용 및 과도한 폐쇄 사용을 피하는 것이 포함됩니다.

Python은 부드러운 학습 곡선과 간결한 구문으로 초보자에게 더 적합합니다. JavaScript는 가파른 학습 곡선과 유연한 구문으로 프론트 엔드 개발에 적합합니다. 1. Python Syntax는 직관적이며 데이터 과학 및 백엔드 개발에 적합합니다. 2. JavaScript는 유연하며 프론트 엔드 및 서버 측 프로그래밍에서 널리 사용됩니다.

Python과 JavaScript는 커뮤니티, 라이브러리 및 리소스 측면에서 고유 한 장점과 단점이 있습니다. 1) Python 커뮤니티는 친절하고 초보자에게 적합하지만 프론트 엔드 개발 리소스는 JavaScript만큼 풍부하지 않습니다. 2) Python은 데이터 과학 및 기계 학습 라이브러리에서 강력하며 JavaScript는 프론트 엔드 개발 라이브러리 및 프레임 워크에서 더 좋습니다. 3) 둘 다 풍부한 학습 리소스를 가지고 있지만 Python은 공식 문서로 시작하는 데 적합하지만 JavaScript는 MDNWebDocs에서 더 좋습니다. 선택은 프로젝트 요구와 개인적인 이익을 기반으로해야합니다.

C/C에서 JavaScript로 전환하려면 동적 타이핑, 쓰레기 수집 및 비동기 프로그래밍으로 적응해야합니다. 1) C/C는 수동 메모리 관리가 필요한 정적으로 입력 한 언어이며 JavaScript는 동적으로 입력하고 쓰레기 수집이 자동으로 처리됩니다. 2) C/C를 기계 코드로 컴파일 해야하는 반면 JavaScript는 해석 된 언어입니다. 3) JavaScript는 폐쇄, 프로토 타입 체인 및 약속과 같은 개념을 소개하여 유연성과 비동기 프로그래밍 기능을 향상시킵니다.

각각의 엔진의 구현 원리 및 최적화 전략이 다르기 때문에 JavaScript 엔진은 JavaScript 코드를 구문 분석하고 실행할 때 다른 영향을 미칩니다. 1. 어휘 분석 : 소스 코드를 어휘 단위로 변환합니다. 2. 문법 분석 : 추상 구문 트리를 생성합니다. 3. 최적화 및 컴파일 : JIT 컴파일러를 통해 기계 코드를 생성합니다. 4. 실행 : 기계 코드를 실행하십시오. V8 엔진은 즉각적인 컴파일 및 숨겨진 클래스를 통해 최적화하여 Spidermonkey는 유형 추론 시스템을 사용하여 동일한 코드에서 성능이 다른 성능을 제공합니다.

실제 세계에서 JavaScript의 응용 프로그램에는 서버 측 프로그래밍, 모바일 애플리케이션 개발 및 사물 인터넷 제어가 포함됩니다. 1. 서버 측 프로그래밍은 Node.js를 통해 실현되며 동시 요청 처리에 적합합니다. 2. 모바일 애플리케이션 개발은 재교육을 통해 수행되며 크로스 플랫폼 배포를 지원합니다. 3. Johnny-Five 라이브러리를 통한 IoT 장치 제어에 사용되며 하드웨어 상호 작용에 적합합니다.

일상적인 기술 도구를 사용하여 기능적 다중 테넌트 SaaS 응용 프로그램 (Edtech 앱)을 구축했으며 동일한 작업을 수행 할 수 있습니다. 먼저, 다중 테넌트 SaaS 응용 프로그램은 무엇입니까? 멀티 테넌트 SAAS 응용 프로그램은 노래에서 여러 고객에게 서비스를 제공 할 수 있습니다.


핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

Dreamweaver Mac版
시각적 웹 개발 도구

PhpStorm 맥 버전
최신(2018.2.1) 전문 PHP 통합 개발 도구

맨티스BT
Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

WebStorm Mac 버전
유용한 JavaScript 개발 도구
