- 浏览: 6362 次
最新评论
<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 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):如: * * <!--增加行--> * <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] = "九"; * 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值,例如:<td data="1">数据一</td> * 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<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; var sHtml = "<img id=imgIndex_"+rIndex+" src='"+oImg.src+"' width=16 height=16/>"; 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<mainTab.rows.length; i++) { with(mainTab.rows[i].cells[nCell]) { if(children[0] && children[0].id == 'imgIndex_'+rIndex && i!= currentRowIndex) { innerHTML = " "; data = null; } } } //置新标志 mainTab.rows[currentRowIndex].cells[nCell].innerHTML = sHtml; mainTab.rows[currentRowIndex].cells[nCell].data = rIndex; } } //设置是否需要编辑的标记,如果设为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); } 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<currentTr.cells.length;i++) { with(currentTr.cells[i]) { style.backgroundColor=currentBgc; style.color=currentFontColor; } } } } //根据标记设置是否可编辑 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 by liu_xc 2004.6.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 by liu_xc 2004.6.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 ClearColor(oTable,nCurRowIndex,oCurCell) { //清除选中行表现 if(nCurRowIndex!=null && nCurRowIndex != -1) { for(i=0;i<oTable.rows[nCurRowIndex].cells.length;i++) { with(oTable.rows[nCurRowIndex].cells[i]) { style.backgroundColor=oBgc; style.color=oFc; } } } //清除可编辑表格 if(oCurCell!=null) { if (oCurCell.children.length>0 ) { if(oCurCell.children[0].tagName.toLowerCase() != "img" &&oCurCell.children[0].tagName.toLowerCase() != "a") { if(oCurCell.children[0].tagName.toLowerCase() == "input") oCurCell.innerHTML=oCurCell.children[0].value.replaceHTML(); else if(oCurCell.children[0].tagName.toLowerCase() == "select") oCurCell.innerHTML=oCurCell.children[0].options[oCurCell.children[0].selectedIndex].text; } } } } //读取表格现有颜色 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] = " "; arrDa[1] = "九"; arrDa[2] = "Tomcat"; arrDa[3] = "数据四"; arrDa[4] = "Ellise"; arrDa[5] = "aaaa"; 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>
发表评论
-
常用的正则表达式
2012-10-17 01:22 569匹配中国邮政编码:[1-9]\d{5}(?!\d) 身份证号 ... -
正则表达式二
2012-10-17 01:23 602正则表达式可以: 测 ... -
正则表达式
2012-10-17 01:23 710正则表达式 1. window系 ... -
51job案例
2012-10-04 01:05 051job案例 -
选项卡
2012-10-17 01:23 625图片要自己添加 <html> <he ... -
innerHTML
2012-10-04 00:54 0<html> <head> ... -
表格高亮显示
2012-10-04 00:53 0<html> <head> ... -
js用户名验证
2012-10-04 00:52 0<html> <head> < ... -
移动的鱼
2012-10-04 00:50 0<html> <head> ... -
js生成增加表格一行
2012-10-04 00:49 0<html> <head> < ... -
js全选和单选
2012-10-04 00:48 0<html> <head> ... -
jdbc调用oracle存储过程-插入操作
2012-10-04 00:42 0//插入操作 import java.sql.Connect ... -
存储过程
2012-10-04 00:35 0create or replace trigger updat ... -
游标和存储过程
2012-10-04 00:30 0declare --游标的使用,先用curso ... -
索引和触发器
2012-10-04 00:28 0create table stu_100w --建立大数据 ... -
500w数据
2012-10-04 00:27 0create synonym si_emp for sco ... -
oracle分页
2012-10-04 00:25 0--分页 --1. 生成rown ... -
盒子属性和html项目
2012-10-03 02:10 01. 传统的网页开发方式: html 2. htm ... -
HTML
2012-10-03 02:04 0html第一章回顾 1. what is html? 超文本 ... -
ServerSocket聊天软件
2012-10-03 01:53 0ServerSocket聊天软件
相关推荐
可编辑表格, 编辑表格内容 保存编辑的内容
bootstrap插件_table可编辑表格_demo,集成插件对表格可编辑以及小插件的使用
今天小编就为大家分享一篇Vue封装的可编辑表格插件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
先简单说明一下,这个Demo...IViewEditTable ## vue+iview 实现的可编辑表格 └── index.html ## 首页 └── js └── editTable.js ## 首页JS └── ivew ## iview相关 └── vue ├── axios.min.js ## a
基于vue的可编辑表格 很多时候我们需要直接编辑表格内容,这个组件刚好解决了需求
jquery可编辑表格插件,简单好用,做列表时一个非常不错的选择
EXT 可编辑 表格的例子 EXT 可编辑 表格的例子
bootstrap可编辑表格,包含编辑单元格文本、日期类型、下拉框(代码可运行)
自己常用的js库和写的一个交互型可编辑表格: BaseJs库的一点源码: /** * 自定义javascript常用基础库 author zhang_jhai 创建时间 2010/04/10 最后修改时间 2010/05/03 * version 2.0 */ // Base库基础类 BaseJs ...
matlab开发-TLAB中的可编辑表格。可添加到图形中的表格;可编辑和滚动。
这是一款十分简单的jQuery+PureCSS实现的可编辑表格插件,点击table表格的单元格对文字内容进行修改,再在单元格外随意点击一下即可保存。
VC6.0中基于MSFlexGrid的可编辑表格的制作及其若干问题的解决方案C++源
jQuery实现可编辑化的表格,有兴趣的可以看看
非常方便,非常好用的修改表格代码。哪里要用直接拉过去就可以了,非常好用。
ext可编辑表格Ext.onReady(function() { Ext.QuickTips.init(); //格式化日期 function formatDate(value) { return value ? value.dateFormat('Y年m月d日') : ''; } // 别名 var fm = Ext.form; //...
js可编辑表格样表,可对列表进行新增、删除、修改操作
vue 中使用 vxe-table 制作可编辑表格的使用过程 项目上有一个表格需要实现在线编辑,开始用了 element 的el-table 实现,单元格内基础情况就是监听了单击单元格切换一个span标签与input标签,复杂点的单元格使用...
双击表格元素TD时,在其中嵌入INPUT对象并接收TD元素数据,进行编辑后失焦点时数据由INPUT对象回送到TD元素。
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,... 一款简洁实用的自适应PC手机端的jQuery可编辑表格代码,jQuery表格添加删除行数据代码,使用起来十分的方便。