JavaScript创建的可编辑表格-369IT编程

admin管理员组
文章数量:1032818

JavaScript创建的可编辑表格

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style type="text/css"> .divClass{height:250px;width:100%;overflow:auto;} td{height:22px;border-bottom:1px solid black;border-right:1px solid black;cursor:default;} th{height:20px;font-size:12px;font-weight:normal;border-bottom:2px solid black;border-right:1px solid black;background-color:#999999} table{border-top:1px solid black;border-left:1px solid black;font-size:13px;} input{border:1px solid black;} .TrOdd{font-family: "宋体";font-size: 12px;background-color: #FFFFFF;} .TrEven{font-family: "宋体";font-size: 12px;background-color: #CCCCCC;} </style> <script language="javascript"> /*****************************可以把下面这部分代码提到一个js文件中***************************/ /*********************************** powerTableEdit.js *********************************/ /**************************************************************************************** * created by yzh 2001.5.12 * 请大家引用时保留这段作者声明，此代码为开源代码；使用不受限制，欢迎大家采用本人所写JS动态拖动表格实现代码。 * JavaScript创建的可编辑表格 * 用法： * 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）：如： * *  * <input onclick=add_row(mainTab) type=button value=ins_row> *  * <input onclick=del_row(mainTab) type=button value=Del_row> *  * <input onclick=res_tab() type=button value=Restore> * *  * <input id=moveUp onclick=Move_up(mainTab) type=button value=Up> *  * <input id=moveDown onclick=Move_down(mainTab) type=button value=Down> * 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] = "VB"; * arrDa[1] = "C#"; * arrDa[2] = "数据四"; * arrDa[3] = "PB"; * arrDa[4] = "Java"; * arrDa[5] = "2.112.521"; * arrDa[6] = "中国"; * pt.setCellData(arrDa); * * //然后调用add_row(mainTab)方法。 * //也可以不设置，增加一行，则自动填充每列的列数 * *修改履历： * 2002.03.18 增加函数 * getColData(colIndex,isImg) //得到指定列的所有值，colIndex为列号,isImg指定此行是否为图片 * getRowData(rowIndex);//得到指定行的所有值，rowIndex为行号 * * 2003.08.18 改变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值，例如：<td data="1">数据一</td> * 2003.07.18 修改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<mainTab.rows.length; i++) { if(mainTab.rows[i].cells[0].children[0] && mainTab.rows[i].cells[0].children[0].tagName.toLowerCase() == "img") arrCelData[i-1] = mainTab.rows[i].cells[0].data; else arrCelData[i-1] = null; } } else { if(colStyle[parseInt(colNum)] == "txt") { for(var i=1; i<mainTab.rows.length; i++) { if(mainTab.rows[i].cells[colNum].children.length>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; i++) arrCelData[i-1] = mainTab.rows[i].cells[colNum].data; } else { for(var i=1; i<mainTab.rows.length; i++) arrCelData[i-1] = mainTab.rows[i].cells[colNum].innerText; } } return arrCelData; }

//获取指定行的所有数据，以数组形式返回，如果是文本编辑方式，就返回文本内容， //如果是下拉框编辑方式，则返回其value值，即td中的data值 //rowIndex为列号，isImg为是否为图片，如果是图片，则返回图片的id function getRowData(rowIndex) { var arrRowData = new Array(); var rowNum = rowIndex == null ? 1 : rowIndex; if(/\D/g.test(rowNum) || rowNum >= mainTab.rows.length || rowNum <= 0) return null; for(var i=0; i<mainTab.rows[rowIndex].cells.length; i++) { with(mainTab.rows[rowIndex].cells[i]) { if(children.length > 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;

//设置是否需要编辑的标记，如果设为true，则表格能编辑，反之不能，默认为可以编辑 function setEditable(editFlag) { if(editFlag == null) editbleFlag == true; else editbleFlag = editFlag; }

//设置增加时各个单元格的数据 function setCellData(arrData) { //如果没有设置数据，则插入各个单元格所在的列数 if(arrData == null) { for(var i=0; i<mainTab.rows[0].cells.length; i++) cellData[i] = i; } else { if(arrData.length >= arrData.length) { for(var i=0; i<mainTab.rows[0].cells.length; i++) cellData[i] = arrData[i]; } //数据不足，补以列号 if(arrData.length < mainTab.rows[0].cells.length) { for(var i=0; i<arrData.length; i++) cellData[i] = arrData[i]; for(var i= arrData.length; i<mainTab.rows[0].cells.length; i++) cellData[i] = i; } } }

function clearColor() { objTable=mainTab; if (currentCell != null) if (currentCell.children.length>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); }

//根据标记设置是否可编辑 if(editbleFlag) { currentCell= currentTd; /*根据不同的设置进行编辑选择*/ if(currentCell.children.length!=1 && currentCell.parentNode.rowIndex != 0) { var cellN = currentCell.cellIndex; if(colStyle[parseInt(cellN)] == 'txt') editCell(mainTab,currentCell,'txt',true); else if(colStyle[parseInt(cellN)] == 'sel') editCell(mainTab,currentCell,'sel',true,sText[parseInt(cellN)],sValue[parseInt(cellN)]); if(currentCell.children.length > 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 = "<input id=dyText type=text size=10 onKeyDown = judgeKeyToDo() value=" + oCell.innerText.replaceHTML() + ">"; break; case 'sel': var preValue = oCell.data;//获取当前表格的内容，在下拉框中选中 for(var i=0; i<sValue.length; i++) { //如果是原有表格的内容，则默认选中 if(sValue[i] == preValue) optionText += "<option value='"+sValue[i]+"' selected>"+sText[i]; else optionText += "<option value='"+sValue[i]+"'>"+sText[i]; } oCell.innerHTML="<select id=powerTableSel onKeyDown = judgeKeyToDo()>"+optionText+"</select>"; //为select的onchange指定事件 oCell.children[0].onchange = selectChangeAction; //清空缓冲区 optionText = ""; break; } } }

//向上移动指定表格的行 function Move_up(objTable) { event.cancelBubble=true; if(currentRowIndex == null) return;

if(currentRowIndex <= 1) return; else { MoveUp(objTable,currentRowIndex); //当前选择也上移 --currentRowIndex; } setEvenOddColor(mainTab); }

function Move_down(objTable) { event.cancelBubble=true; if(currentRowIndex == null) return; if(currentRowIndex == mainTab.rows.length-1) return; else { MoveDown(objTable,currentRowIndex); //当前选择也下移 ++currentRowIndex; } setEvenOddColor(mainTab); }

function add_row(objTable) { event.cancelBubble=true; clearColor(); var cellNow = cellData; //如果没选中行，则在表格的最下方插入 var pos = currentRowIndex==null?objTable.rows.length:(currentRowIndex+1); addRow(objTable,pos,cellNow);

currentCell=null; readDef(objTable); setEvenOddColor(mainTab); //清除设置的数据 for(var i=0; i < mainTab.rows[0].cells.length; i++) cellData[i] = " "; }

//删除行，并处理当前选择项为不选择 function del_row(objTable) { if(currentRowIndex == null) return;

if(confirm("确实要删除第"+currentRowIndex+"行吗?")) { delRow(objTable,currentRowIndex); currentRowIndex=null; currentCell=null; clearColor(); setEvenOddColor(mainTab); } }

function res_tab(objTable) { objTable.outerHTML=orgContent; PowerTableEdit(objTable.id); }

//在表格中指定位置,插入元素 function addRow(oTable,rowIndex2Add,c) { if (rowIndex2Add<0 || rowIndex2Add>oTable.rows.length) return; var currentCell; var newRow=oTable.insertRow(rowIndex2Add); for (var i=0;i<c.length;i++) { //modified 2003.8.28 //增加一条数据时，如果时select形式的编辑方式，则搜索sValue和sText //找到与输入值相符的value赋给td的data if(colStyle[i] == "sel") { //如果没有设置数据而直接添加，会在编辑方式为 //select的td中添加选择框数据的第一项 if(c[i] == " " || c[i] == "") c[i] = sText[i][0]; currentCell=newRow.insertCell(i); currentCell.innerHTML= c[i]; for(var j=0; j<sText[i].length; j++) { if(c[i] == sText[i][j]) { currentCell.data= sValue[i][j]; } } } else { currentCell=newRow.insertCell(i); currentCell.innerHTML= c[i]; } //modified 2004.8.28 //增加一条数据时，如果时select形式的编辑方式，则搜索sValue和sText //找到与输入值相符的value赋给td的data } }

//删除指定行 function delRow(oTable,nRowIndex2Del) { //不删除标题行；指定行不在表格中也不执行删除； if (oTable.rows.length==1 ||nRowIndex2Del==null ||nRowIndex2Del==0 || nRowIndex2Del>=oTable.rows.length) return; else oTable.deleteRow(nRowIndex2Del); }

function MoveUp(oTable,nRowIndex2Move) { //判断移动的行是否合法 if(nRowIndex2Move==null || nRowIndex2Move<=1 || nRowIndex2Move>=oTable.rows.length)return; ChangeRow(oTable,nRowIndex2Move,--nRowIndex2Move); }

//向下移动指定表格的行 function MoveDown(oTable,nRowIndex2Move) { //判断移动的行是否合法 if(nRowIndex2Move==null || currentRowIndex==oTable.rows.length || currentRowIndex==0) return; ChangeRow(oTable,nRowIndex2Move,++nRowIndex2Move); }

//指定表单的两行互换 function ChangeRow(oTable,nRowIndex1,nRowIndex2) { oTable.rows[nRowIndex1].swapNode(oTable.rows[nRowIndex2]); }

//获取指定tag的元素 [逐级查找] function getElement(oElement,sTag) { sTag = sTag.toLowerCase(); if(oElement.tagName.toLowerCase()==sTag) return oElement; while(oElement=oElement.offsetParent) { if(oElement.tagName.toLowerCase()==sTag) return oElement; } return(null); }

//读取表格现有颜色 function ReadOrgColor(oTable) { for(var i=0;i<oTable.rows.length;i++) { for(var j=0;j<oTable.rows[i].cells.length;j++) { with(oTable.rows[i]) { cells[j].oBgc = ""; cells[j].oFc = ""; } } } }

function setEvenOddColor(mainTab) { //增加奇偶行的css控制奇行：tdOdd，偶行：tdEven for(var i=1; i<mainTab.rows.length; i++) { if(i%2 == 0) mainTab.rows[i].className = "TrEven"; else mainTab.rows[i].className = "TrOdd"; } }

//根据在编辑框按键的不同而采取不同的动作 function judgeKeyToDo() { //按键是tab if(event.keyCode == 9) { var cellN; if(currentCell.cellIndex == mainTab.rows[currentRowIndex].cells.length-1) cellN = -1; else cellN = currentCell.cellIndex; var nextCell = mainTab.rows[currentRowIndex].cells[cellN+1]; //如果下一个表格未指定编辑方式，跳过 while(colStyle[parseInt(cellN+1)] == null) { cellN = cellN + 1; nextCell = mainTab.rows[currentRowIndex].cells[cellN+1]; } //如果编辑方式为txt if(colStyle[parseInt(cellN+1)] == 'txt') { if(currentCell.children.length>0) { if(currentCell.children[0].tagName.toLowerCase() == "input") currentCell.innerHTML=currentCell.children[0].value.replaceHTML(); else if(currentCell.children[0].tagName.toLowerCase() == "select") currentCell.innerHTML=currentCell.children[0].options[currentCell.children[0].selectedIndex].text; } editCell(mainTab,nextCell,'txt',true); } //如果编辑方式为select else if(colStyle[parseInt(cellN+1)] == 'sel') { if(currentCell.children.length>0) { if(currentCell.children[0].tagName.toLowerCase() == "input") currentCell.innerHTML=currentCell.children[0].value.replaceHTML(); else if(currentCell.children[0].tagName.toLowerCase() == "select") currentCell.innerHTML=currentCell.children[0].options[currentCell.children[0].selectedIndex].text; } editCell(mainTab,nextCell,'sel',true,sText[parseInt(cellN+1)],sValue[parseInt(cellN+1)]); } //设置当前表格为下一个单元格 currentCell = nextCell; if(currentCell.children.length > 0) { if(currentCell.children[0].type == "select-one") setTimeout('currentCell.children[0].focus()',10); else setTimeout('currentCell.children[0].select()',10); } } //如果按键是enter if(event.keyCode == 13) { if(currentCell.children[0].tagName.toLowerCase() == "input") currentCell.innerHTML=currentCell.children[0].value.replaceHTML(); else if(currentCell.children[0].tagName.toLowerCase() == "select") currentCell.innerHTML=currentCell.children[0].options[currentCell.children[0].selectedIndex].text; } }

String.prototype.replaceHTML = function() { var result = this; result = result.replace(/&/g,"&"); result = result.replace(/</g,"<"); result = result.replace(/>/g,">"); result = result.replace(/\s/g," "); if(result == "") result = " "; return result; } /*********************************** powerTableEdit.js *********************************/ </script> <script language="javascript">

function initTable() { pt = new PowerTableEdit("table1"); 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(2,'txt'); pt.setCol(3,'sel',arrText,arrValue); pt.setCol(4,'txt'); pt.setCol(5,'txt'); pt.setCol(6,'txt'); pt.setCol(7,'txt'); }

function add() { var arrDa = new Array(); arrDa[0] = "VB.Net"; arrDa[1] = "Java"; arrDa[2] = "PowerBuilder"; arrDa[3] = "数据四"; arrDa[4] = "C++"; arrDa[5] = "C"; arrDa[6] = "2.112.521"; arrDa[7] = "中国"; pt.setCellData(arrDa); add_row(mainTab); }

//添加图标 function chanIcon() { var oImg = new Image(); oImg.src = "file.png"; insertImg(oImg,'1'); }

function chanIcon1() { var oImg = new Image(); oImg.src = "woman.jpg"; insertImg(oImg,'2'); }

function chanIcon2() { var oImg = new Image(); oImg.src = "openfoldericon.png"; insertImg(oImg,'3'); } </script> </head>

<body onLoad="initTable();"> <div class="divClass"> <table id=table1 cellSpacing=0 cellPadding=0 border=0 width="100%"> <tr align=middle> <th width=2%> </th> <th width=13%>数字</th> <th width=15%>名称</th> <th width=15%>数据</th> <th width=15%>Engine</th> <th width=10%>字母</th> <th width=15%>Fastest Lap</th> <th width=15%>国家</th> </tr> <tr> <td> </td> <td>1</td> <td>Schumacher</td> <td data="1">数据一</td> <td>Ferrari</td> <td>cccc</td> <td>1.15.872</td> <td>德国</td> </tr> <tr> <td> </td> <td>2</td> <td>Barrichello</td> <td data="3">数据三</td> <td>Ferrari</td> <td>bbbb</td> <td>1.16.760</td> <td>法国</td> </tr> <tr > <td> </td> <td>3</td> <td>Raikkonen</td> <td data="2">数据二</td> <td>Petronas</td> <td>aaaa</td> <td>1.16.875</td> <td>缅甸 </td></tr> <tr > <td> </td> <td>4</td> <td>Heidfeld</td> <td data="3">数据三</td> <td>Petronas</td> <td>aaaa</td> <td>1.17.165</td> <td>朝鲜</td></tr> <tr > <td> </td> <td>5</td> <td>Irvine</td> <td data="1">数据一</td> <td>Cosworth</td> <td>bbbb</td> <td>1.18.016</td> <td>中国</td></tr> <tr > <td> </td> <td>6</td> <td>asdasdasd</td> <td data="4">数据四</td> <td>Cosworth</td> <td>aaaa</td> <td>1.18.015</td> <td>俄罗斯</td></tr> <tr > <td> </td> <td>7</td> <td>Gengine</td> <td data="3">数据三</td> <td>Renault</td> <td>cccc</td> <td>1.15.015</td> <td>韩国</td></tr> <tr > <td> </td> <td>8</td> <td>Slap</td> <td data="2">数据二</td> <td>Renault</td> <td>bbbb</td> <td>1.15.012</td> <td>日本</td> </tr> </table> </div> <p> <div style="background-color:#cccccc"> <input onclick=add() type=button value=添加一行> <input onclick="del_row(mainTab);" type=button value=删除一行> <input id=moveUp onclick=Move_up(mainTab) type=button value=上移一行> <input id=moveDown onclick=Move_down(mainTab) type=button value=下移一行> <input onclick=res_tab(mainTab) type=button value=重置表格> <span style="font-size:12px">按tab键可以自动跳入下一个编辑单元格,enter结束编辑</span> </div><br> <div style="background-color:#cccccc"> <input type=button value='设置文件图标' onclick="chanIcon()"/>   <input type=button value='设置图片图标' onclick="chanIcon1()"/>   <input type=button value='设置文件夹图标' onclick="chanIcon2()"/> </div><br> <div style="background-color:#cccccc"> <input id=colNum size=2> <input type=button value='取列数据' onclick="alert(getColData(document.all.colNum.value))"/>   <input id=rowNum size=2> <input type=button value='取行数据' onclick="alert(getRowData(document.all.rowNum.value))"/> </div><br> </body> </html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。原始发表：2006-03-24，如有侵权请联系 cloudcommunity@tencent 删除var表格数据javascriptchildren