可编辑表格TableCell

客官°小女子只卖身不卖艺 2022-08-17 15:28 175阅读 0赞

**方法一**\-----------------------------------------------------------------------------

<html> <head> <title>DataCell</title> <SCRIPT language="javascript"> var curSrc=null; function EditCell()\{ var i=0,j=0; var wid=0; var Val=''; var Scr=event.srcElement; if(Scr.tagName=="TD")\{ wid=Scr.clientWidth-3; Val=Scr.innerHTML; Scr.innerHTML="<input id='InputText' style='border:0px none; BACKGROUND-COLOR: transparent;\#3399FF; height:14px;font-family:宋体;font-size:12px;color:\#000000' οnblur='return CellOut()' type='text' name='T1' size='10' "+(wid==0?"":"style='width:"+wid+"'") +" Value='" +MyTable.rows\[i\].cells\[j\].innerText+"'>"; InputText.value=Val; curSrc=Scr; Scr.children\[0\].focus(); \} \} function CellOut() \{ var Scr=event.srcElement; var Val=''; if(curSrc)\{ Val=Scr.value; curSrc.innerHTML=Val; \} \} </SCRIPT> </head> <body> <table id='MyTable' style='BORDER-COLLAPSE: collapse' border="1" width="100%" style="font-family:宋体;font-size:14px" mce\_style="font-family:宋体;font-size:14px"> <tr> <td width="14%" OnClick="return EditCell()">1</td> <td width="14%" OnClick="return EditCell()">2</td> <td width="14%" OnClick="return EditCell()">3</td> <td width="14%" OnClick="return EditCell()">4</td> <td width="14%" OnClick="return EditCell()">5</td> <td width="15%" OnClick="return EditCell()">6</td> <td width="15%" OnClick="return EditCell()">7</td> </tr> <tr> <td width="14%" OnClick="return EditCell()">5</td> <td width="14%" OnClick="return EditCell()">6</td> <td width="14%" OnClick="return EditCell()">7</td> <td width="14%" OnClick="return EditCell()">8</td> <td width="14%" OnClick="return EditCell()">9</td> <td width="15%" OnClick="return EditCell()">54</td> <td width="15%" OnClick="return EditCell()">346</td> </tr> </table> <table width=300> <tr> <td style="border-style:solid;border-width:1;border-color:\#B4B4B4"> <div contentEditable="true" style="word-break:break-all">测试</div> </td> </tr> </table> </body> </html>

**方法二**\-----------------------------------------------------------------------------

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>编辑表格数据</title> <mce:style type="text/css"></mce:style><style type="text/css" mce\_bogus="1">body,div,p,ul,li,font,span,td,th\{ font-size:10pt; line-height:155%; \} table\{ border-top-width: 1px; border-right-width: 1px; border-bottom-width: 0px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: none; border-left-style: solid; border-top-color: \#CCCCCC; border-right-color: \#CCCCCC; border-bottom-color: \#CCCCCC; border-left-color: \#CCCCCC; \} td\{ border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: \#CCCCCC; \} .EditCell\_TextBox \{ width: 90%; border:1px solid \#0099CC; \} .EditCell\_DropDownList \{ width: 90%; \}</style> </head> <body> <form id="form1" name="form1" method="post" action=""> <h3>可编辑的表格</h3> <table width="698" border="0" cellpadding="0" cellspacing="0" id="tabProduct"> <tr> <td width="32" align="center" bgcolor="\#EFEFEF" Name="Num"><input type="checkbox" name="checkbox" value="checkbox" /></td> <td width="186" bgcolor="\#EFEFEF" Name="Num" EditType="TextBox">序号</td> <td width="152" bgcolor="\#EFEFEF" Name="ProductName" EditType="DropDownList" DataItems="\{text:'A',value:'a'\},\{text:'B',value:'b'\},\{text:'C',value:'c'\},\{text:'D',value:'d'\}">商品名称</td> <td width="103" bgcolor="\#EFEFEF" Name="Amount" EditType="TextBox">数量</td> <td width="103" bgcolor="\#EFEFEF" Name="Price" EditType="TextBox">单价</td> <td width="120" bgcolor="\#EFEFEF" Name="SumMoney" Expression="Amount\*Price" Format="\#,\#\#\#.00">合计</td> </tr> <tr> <td align="center" bgcolor="\#FFFFFF"><input type="checkbox" name="checkbox2" value="checkbox" /></td> <td bgcolor="\#FFFFFF">1</td> <td bgcolor="\#FFFFFF" Value="c">C</td> <td bgcolor="\#FFFFFF">0</td> <td bgcolor="\#FFFFFF">0</td> <td bgcolor="\#FFFFFF">0</td> </tr> <tr> <td align="center" bgcolor="\#FFFFFF"><input type="checkbox" name="checkbox22" value="checkbox" /></td> <td bgcolor="\#FFFFFF">2</td> <td bgcolor="\#FFFFFF" Value="d">D</td> <td bgcolor="\#FFFFFF">0</td> <td bgcolor="\#FFFFFF">0</td> <td bgcolor="\#FFFFFF">0</td> </tr> </table> <br /> <input type="button" name="Submit" value="新增" οnclick="AddRow(document.getElementById('tabProduct'),1)" /> <input type="button" name="Submit2" value="删除" οnclick="DeleteRow(document.getElementById('tabProduct'),1)" /> <input type="button" name="Submit22" value="重置" οnclick="window.location.reload()" /> <input type="submit" name="Submit3" value="提交" οnclick="GetTableData(document.getElementById('tabProduct'));return false;" /> </form> <mce:script language="javascript" src="GridEdit.js" mce\_src="GridEdit.js"></mce:script> <mce:script language="javascript"></mce:script> </body> </html>

GridEdit.js

/\*\* \* JS实现可编辑的表格 \* 用法:EditTables(tb1,tb2,tb2,......); \* Create by Senty at 2008-04-12 \*\*/ //设置多个表格可编辑 function EditTables()\{ for(var i=0;i<arguments.length;i++)\{ SetTableCanEdit(arguments\[i\]); \} \} //设置表格是可编辑的 function SetTableCanEdit(table)\{ for(var i=1; i<table.rows.length;i++)\{ SetRowCanEdit(table.rows\[i\]); \} \} function SetRowCanEdit(row)\{ for(var j=0;j<row.cells.length; j++)\{ //如果当前单元格指定了编辑类型，则表示允许编辑 var editType = row.cells\[j\].getAttribute("EditType"); if(!editType)\{ //如果当前单元格没有指定，则查看当前列是否指定 editType = row.parentNode.rows\[0\].cells\[j\].getAttribute("EditType"); \} if(editType)\{ row.cells\[j\].onclick = function ()\{ EditCell(this); \} \} \} \} //设置指定单元格可编辑 function EditCell(element, editType)\{ var editType = element.getAttribute("EditType"); if(!editType)\{ //如果当前单元格没有指定，则查看当前列是否指定 editType = element.parentNode.parentNode.rows\[0\].cells\[element.cellIndex\].getAttribute("EditType"); \} switch(editType)\{ case "TextBox": CreateTextBox(element, element.innerHTML); break; case "DropDownList": CreateDropDownList(element); break; default: break; \} \} //为单元格创建可编辑输入框 function CreateTextBox(element, value)\{ //检查编辑状态，如果已经是编辑状态，跳过 var editState = element.getAttribute("EditState"); if(editState != "true")\{ //创建文本框 var textBox = document.createElement("INPUT"); textBox.type = "text"; textBox.className="EditCell\_TextBox"; //设置文本框当前值 if(!value)\{ value = element.getAttribute("Value"); \} textBox.value = value; //设置文本框的失去焦点事件 textBox.onblur = function ()\{ CancelEditCell(this.parentNode, this.value); \} //向当前单元格添加文本框 ClearChild(element); element.appendChild(textBox); textBox.focus(); textBox.select(); //改变状态变量 element.setAttribute("EditState", "true"); element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex); \} \} //为单元格创建选择框 function CreateDropDownList(element, value)\{ //检查编辑状态，如果已经是编辑状态，跳过 var editState = element.getAttribute("EditState"); if(editState != "true")\{ //创建下接框 var downList = document.createElement("Select"); downList.className="EditCell\_DropDownList"; //添加列表项 var items = element.getAttribute("DataItems"); if(!items)\{ items = element.parentNode.parentNode.rows\[0\].cells\[element.cellIndex\].getAttribute("DataItems"); \} if(items)\{ items = eval("\[" + items + "\]"); for(var i=0; i<items.length; i++)\{ var oOption = document.createElement("OPTION"); oOption.text = items\[i\].text; oOption.value = items\[i\].value; downList.options.add(oOption); \} \} //设置列表当前值 if(!value)\{ value = element.getAttribute("Value"); \} downList.value = value; //设置创建下接框的失去焦点事件 downList.onblur = function ()\{ CancelEditCell(this.parentNode, this.value, this.options\[this.selectedIndex\].text); \} //向当前单元格添加创建下接框 ClearChild(element); element.appendChild(downList); downList.focus(); //记录状态的改变 element.setAttribute("EditState", "true"); element.parentNode.parentNode.setAttribute("LastEditRow", element.parentNode.rowIndex); \} \} //取消单元格编辑状态 function CancelEditCell(element, value, text)\{ element.setAttribute("Value", value); if(text)\{ element.innerHTML = text; \}else\{ element.innerHTML = value; \} element.setAttribute("EditState", "false"); //检查是否有公式计算 CheckExpression(element.parentNode); \} //清空指定对象的所有字节点 function ClearChild(element)\{ element.innerHTML = ""; \} //添加行 function AddRow(table, index)\{ var lastRow = table.rows\[table.rows.length-1\]; var newRow = lastRow.cloneNode(true); table.tBodies\[0\].appendChild(newRow); SetRowCanEdit(newRow); return newRow; \} //删除行 function DeleteRow(table, index)\{ for(var i=table.rows.length - 1; i>0;i--)\{ var chkOrder = table.rows\[i\].cells\[0\].firstChild; if(chkOrder)\{ if(chkOrder.type = "CHECKBOX")\{ if(chkOrder.checked)\{ //执行删除 table.deleteRow(i); \} \} \} \} \} //提取表格的值,JSON格式 function GetTableData(table)\{ var tableData = new Array(); alert("行数：" + table.rows.length); for(var i=1; i<table.rows.length;i++)\{ tableData.push(GetRowData(tabProduct.rows\[i\])); \} return tableData; \} //提取指定行的数据，JSON格式 function GetRowData(row)\{ var rowData = \{\}; for(var j=0;j<row.cells.length; j++)\{ name = row.parentNode.rows\[0\].cells\[j\].getAttribute("Name"); if(name)\{ var value = row.cells\[j\].getAttribute("Value"); if(!value)\{ value = row.cells\[j\].innerHTML; \} rowData\[name\] = value; \} \} //alert("ProductName:" + rowData.ProductName); //或者这样：alert("ProductName:" + rowData\["ProductName"\]); return rowData; \} //检查当前数据行中需要运行的字段 function CheckExpression(row)\{ for(var j=0;j<row.cells.length; j++)\{ expn = row.parentNode.rows\[0\].cells\[j\].getAttribute("Expression"); //如指定了公式则要求计算 if(expn)\{ var result = Expression(row,expn); var format = row.parentNode.rows\[0\].cells\[j\].getAttribute("Format"); if(format)\{ //如指定了格式，进行字值格式化 row.cells\[j\].innerHTML = formatNumber(Expression(row,expn), format); \}else\{ row.cells\[j\].innerHTML = Expression(row,expn); \} \} \} \} //计算需要运算的字段 function Expression(row, expn)\{ var rowData = GetRowData(row); //循环代值计算 for(var j=0;j<row.cells.length; j++)\{ name = row.parentNode.rows\[0\].cells\[j\].getAttribute("Name"); if(name)\{ var reg = new RegExp(name, "i"); expn = expn.replace(reg, rowData\[name\].replace(//,/g, "")); \} \} return eval(expn); \} /// /\*\* \* 格式化数字显示方式 \* 用法 \* formatNumber(12345.999,'\#,\#\#0.00'); \* formatNumber(12345.999,'\#,\#\#0.\#\#'); \* formatNumber(123,'000000'); \* @param num \* @param pattern \*/ /\* 以下是范例 formatNumber('','')=0 formatNumber(123456789012.129,null)=123456789012 formatNumber(null,null)=0 formatNumber(123456789012.129,'\#,\#\#0.00')=123,456,789,012.12 formatNumber(123456789012.129,'\#,\#\#0.\#\#')=123,456,789,012.12 formatNumber(123456789012.129,'\#0.00')=123,456,789,012.12 formatNumber(123456789012.129,'\#0.\#\#')=123,456,789,012.12 formatNumber(12.129,'0.00')=12.12 formatNumber(12.129,'0.\#\#')=12.12 formatNumber(12,'00000')=00012 formatNumber(12,'\#.\#\#')=12 formatNumber(12,'\#.00')=12.00 formatNumber(0,'\#.\#\#')=0 \*/ function formatNumber(num,pattern)\{ var strarr = num?num.toString().split('.'):\['0'\]; var fmtarr = pattern?pattern.split('.'):\[''\]; var retstr=''; // 整数部分 var str = strarr\[0\]; var fmt = fmtarr\[0\]; var i = str.length-1; var comma = false; for(var f=fmt.length-1;f>=0;f--)\{ switch(fmt.substr(f,1))\{ case '\#': if(i>=0 ) retstr = str.substr(i--,1) + retstr; break; case '0': if(i>=0) retstr = str.substr(i--,1) + retstr; else retstr = '0' + retstr; break; case ',': comma = true; retstr=','+retstr; break; \} \} if(i>=0)\{ if(comma)\{ var l = str.length; for(;i>=0;i--)\{ retstr = str.substr(i,1) + retstr; if(i>0 && ((l-i)%3)==0) retstr = ',' + retstr; \} \} else retstr = str.substr(0,i+1) + retstr; \} retstr = retstr+'.'; // 处理小数部分 str=strarr.length>1?strarr\[1\]:''; fmt=fmtarr.length>1?fmtarr\[1\]:''; i=0; for(var f=0;f<fmt.length;f++)\{ switch(fmt.substr(f,1))\{ case '\#': if(i<str.length) retstr+=str.substr(i++,1); break; case '0': if(i<str.length) retstr+= str.substr(i++,1); else retstr+='0'; break; \} \} return retstr.replace(/^,+/,'').replace(//.$/,''); \}

js动态创建Table-------------------------------

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>创建HTML表格</title> <mce:script type="text/javascript"></mce:script> </head> <body οnlοad="start()"> <input type="button" οnclick="insertRow()" value=增加行> </body> </html>