<script language="javascript"> /*****************************可以把下面这部分代码提到一个js文件中***************************/ /*********************************** powerTableEdit.js *********************************/ /**************************************************************************************** * created by LxcJie 2004.3.1 * * 用法： * 1，首先创建表格对象： var pt = new PowerTableEdit("table1"); * 其中，"table1"为表格的id * * 2，设置表格的编辑方式,调用pt对象的setCol方法，此方法有三个参数： * * setCol(colNum,colSty,sDa) * * > colNum：为准备编辑的列编号，第一列编号为0 * > colSty：为准备编辑的方式，txt为文本编辑方式，sel为下拉编辑方式 * > sDa：如果选择的编辑方式为下拉编辑方式，则此参数有效，代表下拉框中的预置数据，是数组类型 * * 3, 在按钮中调用相应的方法（注意：上移行和下移行按钮的id必须为moveUp和moveDown）：如： * *
*
*
*
*
*
* *
*
*
*
* 4, 如果想取消编辑功能，调用方法setEditable(false) * 5, 增加一行时，可以先调用selCellData方法，传入一个数组，来设置增加一行时没格单元格的数据 * * 5，例如： * var arr = new Array(); * arr[0] = "a"; * arr[1] = "b"; * arr[2] = "c"; * * var arr1 = new Array(); * arr1[0] = "1"; * arr1[1] = "2"; * arr1[2] = "3"; * * //页面table的id为table1 * var pt = new PowerTable("table1"); * * //表格的第一列为文本编辑方式 * pt.setCol(0,'txt'); * //表格的第二列为下拉框编辑方式，指定数据为数组arr * pt.setCol(2,'sel',arr); * //如果不想此表格有编辑功能 pt.setEditable(false) * * //增加一行时： * var arrDa = new Array(); * arrDa[0] = "九"; * arrDa[1] = "Tomcat"; * arrDa[2] = "数据四"; * arrDa[3] = "Ellise"; * arrDa[4] = "aaaa"; * arrDa[5] = "2.112.521"; * arrDa[6] = "美国"; * pt.setCellData(arrDa); * * //然后调用add_row(mainTab)方法。 * //也可以不设置，增加一行，则自动填充每列的列数 * *修改履历： * 2004.04.12 刘肖冲 增加函数 * getColData(colIndex,isImg) //得到指定列的所有值，colIndex为列号,isImg指定此行是否为图片 * getRowData(rowIndex);//得到指定行的所有值，rowIndex为行号 * * 2004.04.12 刘肖冲 改变select的接口 * var arrText = new Array(); * arrText[0] = "数据一"; * arrText[1] = "数据二"; * arrText[2] = "数据三"; * arrText[3] = "数据四"; * var arrValue = new Array(); * arrValue[0] = "1"; * arrValue[1] = "2"; * arrValue[2] = "3"; * arrValue[3] = "4"; * pt.setCol(3,'sel',arrText,arrValue); * * arrText为select的text，arrValue为select的value值 * 注：构建表格时，必须select所在的所有td中指定data等于value值，例如：数据一 * 2004.6.28 刘肖冲修改addRow()方法 * 增加一条数据时，如果是select形式的编辑方式，则搜索sValue和sText 找到与输入值相符的value赋给td的data *********************************************************************************************/ var mainTab = null; var currentRowIndex = null; var currentCell = null; var orgContent = ""; //标记是否能编辑 var editbleFlag = true; var showColume = false; //选中行默认颜色 var currentBgc = "cornflowerblue"; //选中行字体颜色 var currentFontColor = "black"; //用来保存下拉菜单中的option项 var optionText = ""; //图片列号 var imagePos = 0; //保存每一列的编辑类型 var colStyle = new Array(); //保存下拉框中的text和value var sText = new Array(); var sValue = new Array(); //增加是各个单元格的数据 var cellData = new Array(); /** * 建立PowerTableEdit类，该类实现表格的自由编辑，删除，增加，上下移动 * 其中自由编辑可以指定编辑方式及哪一列需要编辑 * 使用时，只需要利用表格的id创建PowerTableEdit对象 */ function PowerTableEdit(tableId) { //当前选中行 currentRowIndex = null; //当前编辑cell currentCell = null; mainTab = document.all(tableId); //获取已定义的颜色 readDef(mainTab); mainTab.onclick = clickIt; //mainTab.ondblclick = dblclickIt; //设置select下拉框的数据 this.setCol = setColStyle; this.setEditable = setEditable; this.setCellData = setCellData; this.getColData = getColData; this.getRowData = getRowData; //原始表格，可以支持reset orgContent = mainTab.outerHTML; //初始化增加表格的数据 for(var i=0; i < mainTab.rows[0].cells.length; i++) cellData[i] = " "; setEvenOddColor(mainTab); } //为select的onchange事件指定动作 function selectChangeAction() { var cellNum = currentCell.cellIndex; var valueOfSel = document.all.powerTableSel.value; //给单元格的data赋值 event.srcElement.parentNode.data = event.srcElement.value; //动作代理 selectProxy(cellNum,valueOfSel); } function selectProxy(cellNum, valueOfSel) {} //获取指定列的所有数据，以数组形式返回，如果是文本编辑方式，就返回文本内容， //如果是下拉框编辑方式，则返回其value值，即td中的data值 //colIndex为列号，isImg为是否为图片 function getColData(colIndex,isImg) { if(colIndex == "") return null; var colNum = colIndex == null ? 0 : colIndex; //如果为指定此参数，则默认为false，即不是图片格式数据 var isImgCol = isImg == null ? false : isImg; var arrCelData = new Array(); if(//D/g.test(colNum) || colNum >= mainTab.rows[0].cells.length || colNum < 0) return null; if(isImgCol) { for(var i=1; i
0) arrCelData[i-1] = mainTab.rows[i].cells[colNum].children[0].value; else arrCelData[i-1] = mainTab.rows[i].cells[colNum].innerText; } } else if(colStyle[parseInt(colNum)] == "sel") { for(var i=1; i
= mainTab.rows.length || rowNum <= 0) return null; for(var i=0; i
0) { if(children[0].tagName.toLowerCase() == "img") arrRowData[i] = data; else if(children[0].tagName.toLowerCase() == "select") arrRowData[i] = data; else if(children[0].tagName.toLowerCase() == "input") arrRowData[i] = children[0].value; else arrRowData[i] = innerText; } else { if(colStyle[i] == "sel") arrRowData[i] = data; else arrRowData[i] = innerText; } } } return arrRowData; } //如果是input或textarea,则允许选中里面的文字 document.onselectstart = function() { var oObj = event.srcElement; if(oObj.tagName.toLowerCase() != "input" && oObj.tagName.toLowerCase()!= "textarea") return false; } /** * 设置编辑方式 * colNum 为列编号 * colSty为编辑类型，分为：txt－文本框编辑； sel－下拉框 编辑 * sDa 当编辑方式是下拉框方式时，传入下拉框中的数据数组 */ function setColStyle(colNum,colSty,sTxt,sVal) { colStyle[parseInt(colNum)] = colSty; sText[parseInt(colNum)] = sTxt == null ? "" : sTxt; sValue[parseInt(colNum)] = sVal == null ? "" : sVal; } //在表格的指定位置插入标记图标，其中， //oImg是用来插入的图标对象， //rIndex，是没个图标的id，如果一列中要采用不同的标志，该值不可相同 //nCell,为设置的图标的列，默认为第一列 function insertImg(oImg,rIndex,nCell) { if(nCell == null) nCell = 0; else imagePos = nCell; var sHtml = "
![]("+oImg.src+")
"; if(!currentRowIndex) { alert("请选中要设置图片的行！"); return; } //检测所选行已经存在标志时的情况 if(mainTab.rows[currentRowIndex].cells[nCell].children[0]) { if(mainTab.rows[currentRowIndex].cells[nCell].children[0].id != "imgIndex_"+rIndex) alert("此位置已经存在其它的标志！"); else return; } else { //遍历整个表格，把原始标志还原 for(var i=0; i
= arrData.length) { for(var i=0; i
0) { if(currentCell.children[0].tagName.toLowerCase() == "input") currentCell.innerText=currentCell.children[0].value; else if(currentCell.children[0].tagName.toLowerCase() == "select") currentCell.innerHTML=currentCell.children[0].options[currentCell.children[0].selectedIndex].text; } ClearColor(objTable,currentRowIndex,currentCell); } function document.onclick() { clearColor(); currentRowIndex = null; currentCell = null; } function readDef(objTable) { ReadOrgColor(objTable); } function clickIt() { event.cancelBubble=true; var currentObject = event.srcElement; var i = 0 ,j = 0; //原编辑项变为表格 if(currentCell!=null && currentRowIndex!=0 && currentObject.type!="select-one" && currentObject.type!="text") if (currentCell.children.length>0 ) { if(currentCell.children[0].tagName.toLowerCase() != "img" && currentCell.children[0].tagName.toLowerCase() != "a") { if(currentCell.children[0].tagName.toLowerCase() == "input") currentCell.innerText=currentCell.children[0].value; else if(currentCell.children[0].tagName.toLowerCase() == "select") currentCell.innerHTML=currentCell.children[0].options[currentCell.children[0].selectedIndex].text; } } if(currentObject.tagName.toLowerCase() != "table" && currentObject.tagName.toLowerCase() != "tbody" && currentObject.tagName.toLowerCase() != "tr") { var currentTd = getElement(currentObject,"td"); if(currentTd==null) return; //modified 2004.04.09 更改点击图标，链接可以选择单行 if (currentTd.children.length<=0 || currentTd.children[0].tagName.toLowerCase() == "a" || currentTd.children[0].tagName.toLowerCase() == "img") //end modified 2004.04.09 更改点击图标，链接可以选择单行 { var currentTr = currentTd.parentElement; var objTable = getElement(currentTd,"table"); var i = 0; clearColor(); currentRowIndex = currentTr.rowIndex; //设置选中的行 if(currentRowIndex!=0) { for(i=0;i
0) { if(currentCell.children[0].type == "select-one") currentCell.children[0].focus(); else currentCell.children[0].select(); } } } } selectRowProxy(currentRowIndex); } //增加点击一行时的代理动作，参数是选中当前行号 function selectRowProxy(currentRowIndex){} //表格指定位置变为可编辑 //目前支持文本和下拉框 function editCell(oTable,oCell,editType,bEditable,sText,sValue) { if (bEditable) { switch(editType) { case 'txt': if(sText == null) sText = true; oCell.innerHTML = "
"; break; case 'sel': var preValue = oCell.data;//获取当前表格的内容，在下拉框中选中 for(var i=0; i
"+sText[i]; else optionText += "
扫一扫
4819
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
