<span contenteditable="true">11111111111111111</span>
<!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> <script src="JavaScript.js"></script> <style type="text/css"> <!-- 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="新增" onclick="AddRow(document.getElementById('tabProduct'),1)" /> <input type="button" name="Submit2" value="刪除" onclick="DeleteRow(document.getElementById('tabProduct'),1)" /> <input type="button" name="Submit22" value="重置" onclick="window.location.reload()" /> <input type="submit" name="Submit3" value="提交" onclick="GetTableData(document.getElementById('tabProduct'));return false;" /> </form> <script language="javascript"> var tabProduct = document.getElementById("tabProduct");//獲取table對象 // 設置表格可編輯 // 可一次設置多個，例如：EditTables(tb1,tb2,tb2,......) EditTables(tabProduct);//調用方法 傳遞這個table對象 </script> </body> </html>
js
/** * JS實現可編輯的表格 * 用法:EditTables(tb1,tb2,tb2,......); * Create by Senty at 2008-04-12 **/ //設置多個表格可編輯 function EditTables() { for (var i = 0; i < arguments.length; i++) { //arguments叫做類數組對象 SetTableCanEdit(arguments[i]); //設置表可以編輯 } } //設置表格單擊事件 function SetTableCanEdit(table) { for (var i = 1; i < table.rows.length; i++) { //循環傳遞過來的對象的行 第0行不傳遞 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 = null 表示單元格沒有指定 //如果當前單元格沒有指定，則查看當前列是否指定 editType = row.parentNode.rows[0].cells[j].getAttribute("EditType"); //傳遞過來的行的父元素下的行集合的第一行的指定屬性名的屬性值 } if (editType) { //單元格指定的有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); //調用創建文本框函數，傳遞td和td中的內容 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");//獲取td指定屬性名的Value屬性值 } textBox.value = value;//編輯框 內容賦值 //設置文本框的失去焦點事件 textBox.onblur = function () { CancelEditCell(this.parentNode, this.value); //取消編輯 單元格事件 //傳遞td 和編輯框的內容 } //向當前單元格添加文本框 ClearChild(element); //清空td中的內容 element.appendChild(textBox);//td追加這個元素 textBox.focus(); //獲得焦點 textBox.select(); //內容全選 //改變狀態變量 element.setAttribute("EditState", "true"); //設置指定屬性名和屬性值 element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex);//設置這個td父元素的父元素的currentrow屬性為這個元素的父元素的所在行 } } //為單元格創建選擇框 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");//td所在列的屬性值 } 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");//獲取td的值 } downList.value = value; //設置創建下接框的失去焦點事件 downList.onblur = function () { CancelEditCell(this.parentNode, this.value, this.options[this.selectedIndex].text); //取消編輯單元格 } //向當前單元格添加創建下接框 ClearChild(element); //清空td下內容 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); //設置td的Value屬性為編輯框內容 if (text) { element.innerHTML = text; } else { element.innerHTML = value; //td插入這個傳遞過來的編輯框內容 } 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])); } console.log(tableData); 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(/\.$/, ''); }
設置文字不可選中后的css 樣式
webkit-user-select: none;
user-select: none;