当前位置：首页 > 建站分享 > 正文内容

HTML+JS实现可编辑表格

lujun2个月前 (07-15)建站分享60

实现可视化编辑表格操作...
HTML文件:

Java代码  收藏代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

  2. <html xmlns="http://www.w3.org/1999/xhtml">  

  3. <head>  

  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  

  5. <title>编辑表格数据</title>  

  6. <style type="text/css">  

  7. <!--  

  8. body,div,p,ul,li,font,span,td,th{  

  9. font-size:10pt;  

  10. line-height:155%;  

  11. }  

  12. table{  

  13. border-top-width: 1px;  

  14. border-right-width: 1px;  

  15. border-bottom-width: 0px;  

  16. border-left-width: 1px;  

  17. border-top-style: solid;  

  18. border-right-style: solid;  

  19. border-bottom-style: none;  

  20. border-left-style: solid;  

  21. border-top-color: #CCCCCC;  

  22. border-right-color: #CCCCCC;  

  23. border-bottom-color: #CCCCCC;  

  24. border-left-color: #CCCCCC;  

  25. }  

  26. td{  

  27. border-bottom-width: 1px;  

  28. border-bottom-style: solid;  

  29. border-bottom-color: #CCCCCC;  

  30. }  

  31. .EditCell_TextBox {  

  32. width: 90%;  

  33. border:1px solid #0099CC;  

  34. }  

  35. .EditCell_DropDownList {  

  36. width: 90%;  

  37. }  

  38. -->  

  39. </style>  

  40. </head>  

  41.   

  42. <body>  

  43. <form id="form1" name="form1" method="post" action="">  

  44. <h3>可编辑的表格</h3>  

  45. <table width="698" border="0" cellpadding="0" cellspacing="0" id="tabProduct">  

  46.     <tr>  

  47.       <td width="32" align="center" bgcolor="#EFEFEF" Name="Num"><input type="checkbox" name="checkbox" value="checkbox" /></td>  

  48.       <td width="186" bgcolor="#EFEFEF" Name="Num" EditType="TextBox">序号</td>  

  49.       <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>  

  50.       <td width="103" bgcolor="#EFEFEF" Name="Amount" EditType="TextBox">数量</td>  

  51.       <td width="103" bgcolor="#EFEFEF" Name="Price" EditType="TextBox">单价</td>  

  52.       <td width="120" bgcolor="#EFEFEF" Name="SumMoney" Expression="Amount*Price" Format="#,###.00">合计</td>  

  53.     </tr>  

  54.     <tr>  

  55.       <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox2" value="checkbox" /></td>  

  56.       <td bgcolor="#FFFFFF">1</td>  

  57.       <td bgcolor="#FFFFFF" Value="c">C</td>  

  58.       <td bgcolor="#FFFFFF">0</td>  

  59.       <td bgcolor="#FFFFFF">0</td>  

  60.       <td bgcolor="#FFFFFF">0</td>  

  61.     </tr>  

  62.     <tr>  

  63.       <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox22" value="checkbox" /></td>  

  64.       <td bgcolor="#FFFFFF">2</td>  

  65.       <td bgcolor="#FFFFFF" Value="d">D</td>  

  66.       <td bgcolor="#FFFFFF">0</td>  

  67.       <td bgcolor="#FFFFFF">0</td>  

  68.       <td bgcolor="#FFFFFF">0</td>  

  69.     </tr>  

  70. </table>  

  71.   

  72. <br />  

  73. <input type="button" name="Submit" value="新增" onclick="AddRow(document.getElementById('tabProduct'),1)" />  

  74. <input type="button" name="Submit2" value="删除" onclick="DeleteRow(document.getElementById('tabProduct'),1)" />  

  75. <input type="button" name="Submit22" value="重置" onclick="window.location.reload()" />  

  76. <input type="submit" name="Submit3" value="提交" onclick="GetTableData(document.getElementById('tabProduct'));return false;" />  

  77. </form>  

  78.   

  79. <script language="javascript" src="GridEdit.js"></script>  

  80. <script language="javascript">  

  81. var tabProduct = document.getElementById("tabProduct");  

  82.   

  83. // 设置表格可编辑  

  84. // 可一次设置多个，例如：EditTables(tb1,tb2,tb2,......)  

  85. EditTables(tabProduct);  

  86.   

  87.   

  88. </script>  

  89. </body>  

  90. </html>  


//下面为引入所用的JS
GridEdit.js

Java代码  收藏代码

  1. /** 

  2. * JS实现可编辑的表格   

  3. * 用法:EditTables(tb1,tb2,tb2,......); 

  4. * Create by Senty at 2008-04-12 

  5. **/  

  6.   

  7. //设置多个表格可编辑  

  8. function EditTables(){  

  9. for(var i=0;i<arguments.length;i++){  

  10.    SetTableCanEdit(arguments[i]);  

  11. }  

  12. }  

  13.   

  14. //设置表格是可编辑的  

  15. function SetTableCanEdit(table){  

  16. for(var i=1; i<table.rows.length;i++){  

  17.    SetRowCanEdit(table.rows[i]);  

  18. }  

  19. }  

  20.   

  21. function SetRowCanEdit(row){  

  22. for(var j=0;j<row.cells.length; j++){  

  23.   

  24.    //如果当前单元格指定了编辑类型，则表示允许编辑  

  25.    var editType = row.cells[j].getAttribute("EditType");  

  26.    if(!editType){  

  27.     //如果当前单元格没有指定，则查看当前列是否指定  

  28.     editType = row.parentNode.rows[0].cells[j].getAttribute("EditType");  

  29.    }  

  30.    if(editType){  

  31.     row.cells[j].onclick = function (){  

  32.      EditCell(this);  

  33.     }  

  34.    }  

  35. }  

  36.   

  37. }  

  38.   

  39. //设置指定单元格可编辑  

  40. function EditCell(element, editType){  

  41.   

  42. var editType = element.getAttribute("EditType");  

  43. if(!editType){  

  44.    //如果当前单元格没有指定，则查看当前列是否指定  

  45.    editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("EditType");  

  46. }  

  47.   

  48. switch(editType){  

  49.    case "TextBox":  

  50.     CreateTextBox(element, element.innerHTML);  

  51.     break;  

  52.    case "DropDownList":  

  53.     CreateDropDownList(element);  

  54.     break;  

  55.    default:  

  56.     break;  

  57. }  

  58. }  

  59.   

  60. //为单元格创建可编辑输入框  

  61. function CreateTextBox(element, value){  

  62. //检查编辑状态，如果已经是编辑状态，跳过  

  63. var editState = element.getAttribute("EditState");  

  64. if(editState != "true"){  

  65.    //创建文本框  

  66.    var textBox = document.createElement("INPUT");  

  67.    textBox.type = "text";  

  68.    textBox.className="EditCell_TextBox";  

  69.     

  70.     

  71.    //设置文本框当前值  

  72.    if(!value){  

  73.     value = element.getAttribute("Value");  

  74.    }    

  75.    textBox.value = value;  

  76.     

  77.    //设置文本框的失去焦点事件  

  78.    textBox.onblur = function (){  

  79.     CancelEditCell(this.parentNode, this.value);  

  80.    }  

  81.    //向当前单元格添加文本框  

  82.    ClearChild(element);  

  83.    element.appendChild(textBox);  

  84.    textBox.focus();  

  85.    textBox.select();  

  86.     

  87.    //改变状态变量  

  88.    element.setAttribute("EditState", "true");  

  89.    element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex);  

  90. }  

  91.   

  92. }  

  93.   

  94.   

  95. //为单元格创建选择框  

  96. function CreateDropDownList(element, value){  

  97. //检查编辑状态，如果已经是编辑状态，跳过  

  98. var editState = element.getAttribute("EditState");  

  99. if(editState != "true"){  

  100.    //创建下接框  

  101.    var downList = document.createElement("Select");  

  102.    downList.className="EditCell_DropDownList";  

  103.     

  104.    //添加列表项  

  105.    var items = element.getAttribute("DataItems");  

  106.    if(!items){  

  107.     items = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("DataItems");  

  108.    }  

  109.     

  110.    if(items){  

  111.     items = eval("[" + items + "]");  

  112.     for(var i=0; i<items.length; i++){  

  113.      var oOption = document.createElement("OPTION");  

  114.      oOption.text = items[i].text;  

  115.      oOption.value = items[i].value;  

  116.      downList.options.add(oOption);  

  117.     }  

  118.    }  

  119.     

  120.    //设置列表当前值  

  121.    if(!value){  

  122.     value = element.getAttribute("Value");  

  123.    }  

  124.    downList.value = value;  

  125.   

  126.    //设置创建下接框的失去焦点事件  

  127.    downList.onblur = function (){  

  128.     CancelEditCell(this.parentNode, this.value, this.options[this.selectedIndex].text);  

  129.    }  

  130.     

  131.    //向当前单元格添加创建下接框  

  132.    ClearChild(element);  

  133.    element.appendChild(downList);  

  134.    downList.focus();  

  135.     

  136.    //记录状态的改变  

  137.    element.setAttribute("EditState", "true");  

  138.    element.parentNode.parentNode.setAttribute("LastEditRow", element.parentNode.rowIndex);  

  139. }  

  140.   

  141. }  

  142.   

  143.   

  144. //取消单元格编辑状态  

  145. function CancelEditCell(element, value, text){  

  146. element.setAttribute("Value", value);  

  147. if(text){  

  148.    element.innerHTML = text;  

  149. }else{  

  150.    element.innerHTML = value;  

  151. }  

  152. element.setAttribute("EditState", "false");  

  153.   

  154. //检查是否有公式计算  

  155. CheckExpression(element.parentNode);  

  156. }  

  157.   

  158. //清空指定对象的所有字节点  

  159. function ClearChild(element){  

  160. element.innerHTML = "";  

  161. }  

  162.   

  163. //添加行  

  164. function AddRow(table, index){  

  165. var lastRow = table.rows[table.rows.length-1];  

  166. var newRow = lastRow.cloneNode(true);  

  167. table.tBodies[0].appendChild(newRow);  

  168. SetRowCanEdit(newRow);  

  169. return newRow;  

  170.   

  171. }  

  172.   

  173.   

  174. //删除行  

  175. function DeleteRow(table, index){  

  176. for(var i=table.rows.length - 1; i>0;i--){  

  177.    var chkOrder = table.rows[i].cells[0].firstChild;  

  178.    if(chkOrder){  

  179.     if(chkOrder.type = "CHECKBOX"){  

  180.      if(chkOrder.checked){  

  181.       //执行删除  

  182.       table.deleteRow(i);  

  183.      }  

  184.     }  

  185.    }  

  186. }  

  187. }  

  188.   

  189. //提取表格的值,JSON格式  

  190. function GetTableData(table){  

  191. var tableData = new Array();  

  192. alert("行数：" + table.rows.length);  

  193. for(var i=1; i<table.rows.length;i++){  

  194.    tableData.push(GetRowData(tabProduct.rows[i]));  

  195. }  

  196.   

  197. return tableData;  

  198.   

  199. }  

  200. //提取指定行的数据，JSON格式  

  201. function GetRowData(row){  

  202. var rowData = {};  

  203. for(var j=0;j<row.cells.length; j++){  

  204.    name = row.parentNode.rows[0].cells[j].getAttribute("Name");  

  205.    if(name){  

  206.     var value = row.cells[j].getAttribute("Value");  

  207.     if(!value){  

  208.      value = row.cells[j].innerHTML;  

  209.     }  

  210.      

  211.     rowData[name] = value;  

  212.    }  

  213. }  

  214. //alert("ProductName:" + rowData.ProductName);  

  215. //或者这样：alert("ProductName:" + rowData["ProductName"]);  

  216. return rowData;  

  217.   

  218. }  

  219.   

  220. //检查当前数据行中需要运行的字段  

  221. function CheckExpression(row){  

  222. for(var j=0;j<row.cells.length; j++){  

  223.    expn = row.parentNode.rows[0].cells[j].getAttribute("Expression");  

  224.    //如指定了公式则要求计算  

  225.    if(expn){  

  226.     var result = Expression(row,expn);  

  227.     var format = row.parentNode.rows[0].cells[j].getAttribute("Format");  

  228.     if(format){  

  229.      //如指定了格式，进行字值格式化  

  230.      row.cells[j].innerHTML = formatNumber(Expression(row,expn), format);  

  231.     }else{  

  232.      row.cells[j].innerHTML = Expression(row,expn);  

  233.     }  

  234.    }  

  235.     

  236. }  

  237. }  

  238.   

  239. //计算需要运算的字段  

  240. function Expression(row, expn){  

  241. var rowData = GetRowData(row);  

  242. //循环代值计算  

  243. for(var j=0;j<row.cells.length; j++){  

  244.    name = row.parentNode.rows[0].cells[j].getAttribute("Name");  

  245.    if(name){  

  246.     var reg = new RegExp(name, "i");  

  247.     expn = expn.replace(reg, rowData[name].replace(/\,/g, ""));  

  248.    }  

  249. }  

  250. return eval(expn);  

  251. }  

  252.   

  253. ///////////////////////////////////////////////////////////////////////////////////  

  254. /** 

  255. * 格式化数字显示方式   

  256. * 用法 

  257. * formatNumber(12345.999,'#,##0.00'); 

  258. * formatNumber(12345.999,'#,##0.##'); 

  259. * formatNumber(123,'000000'); 

  260. * @param num 

  261. * @param pattern 

  262. */  

  263. /* 以下是范例 

  264. formatNumber('','')=0 

  265. formatNumber(123456789012.129,null)=123456789012 

  266. formatNumber(null,null)=0 

  267. formatNumber(123456789012.129,'#,##0.00')=123,456,789,012.12 

  268. formatNumber(123456789012.129,'#,##0.##')=123,456,789,012.12 

  269. formatNumber(123456789012.129,'#0.00')=123,456,789,012.12 

  270. formatNumber(123456789012.129,'#0.##')=123,456,789,012.12 

  271. formatNumber(12.129,'0.00')=12.12 

  272. formatNumber(12.129,'0.##')=12.12 

  273. formatNumber(12,'00000')=00012 

  274. formatNumber(12,'#.##')=12 

  275. formatNumber(12,'#.00')=12.00 

  276. formatNumber(0,'#.##')=0 

  277. */  

  278. function formatNumber(num,pattern){    

  279. var strarr = num?num.toString().split('.'):['0'];    

  280. var fmtarr = pattern?pattern.split('.'):[''];    

  281. var retstr='';    

  282.     

  283. // 整数部分    

  284. var str = strarr[0];    

  285. var fmt = fmtarr[0];    

  286. var i = str.length-1;      

  287. var comma = false;    

  288. for(var f=fmt.length-1;f>=0;f--){    

  289.     switch(fmt.substr(f,1)){    

  290.       case '#':    

  291.         if(i>=0 ) retstr = str.substr(i--,1) + retstr;    

  292.         break;    

  293.       case '0':    

  294.         if(i>=0) retstr = str.substr(i--,1) + retstr;    

  295.         else retstr = '0' + retstr;    

  296.         break;    

  297.       case ',':    

  298.         comma = true;    

  299.         retstr=','+retstr;    

  300.         break;    

  301.     }    

  302. }    

  303. if(i>=0){    

  304.     if(comma){    

  305.       var l = str.length;    

  306.       for(;i>=0;i--){    

  307.         retstr = str.substr(i,1) + retstr;    

  308.         if(i>0 && ((l-i)%3)==0) retstr = ',' + retstr;     

  309.       }    

  310.     }    

  311.     else retstr = str.substr(0,i+1) + retstr;    

  312. }    

  313.     

  314. retstr = retstr+'.';    

  315. // 处理小数部分    

  316. str=strarr.length>1?strarr[1]:'';    

  317. fmt=fmtarr.length>1?fmtarr[1]:'';    

  318. i=0;    

  319. for(var f=0;f<fmt.length;f++){    

  320.     switch(fmt.substr(f,1)){    

  321.       case '#':    

  322.         if(i<str.length) retstr+=str.substr(i++,1);    

  323.         break;    

  324.       case '0':    

  325.         if(i<str.length) retstr+= str.substr(i++,1);    

  326.         else retstr+='0';    

  327.         break;    

  328.     }    

  329. }    

  330. return retstr.replace(/^,+/,'').replace(/\.$/,'');    

  331. }  

来源：https://www.iteye.com/blog/lgscofield-1499680

扫描二维码推送至手机访问。

版权声明：本文由5020工作室发布，如需转载请注明出处。

本文链接：http://5020.work/?id=65

分享给朋友：
返回列表

上一篇：HTML js 通过 post 方式进行新窗口打开页面跳转下载

没有最新的文章了...

相关文章

Jsdelivr 国内CDN加速替换方法

Jsdelivr 国内CDN加速替换方法

Jsdelivr国内凉了，好多网站和服务出现了大花脸，于是用北京bgp机器进行反代。国内CDN分发于是有了这个服务，服务器及CDN均流量无限，G口起步，不设CC防御，可以随心使用。那些用gh图床的也可以直接接入了使用方式：替换「//cdn....

dplayer + m3u8+ p2p加速

1、打开 CDNBye OMS  注册账号。添加域名-认证域名。按照里面步骤来即可。2、php代码：<html><head><title>847默认播放器</title...

PHP curl模拟ip和来源进行访问

PHP curl模拟ip和来源进行访问<pre>public function moniurlqingqiu(){$ch = curl_init();$curlurl = "http://wx.newmiracle.c...

白嫖服务器和域名，演示网站永不休眠操作

白嫖服务器和域名，演示网站永不休眠操作

开源影音工具TVbox玩到一定程度后，就需要一些自定义操作，比如服务器、比如Alist建站、域名，但是大家都有一颗白嫖各种服务的心，所以，这里分享的都是不花一分钱纯白嫖各个平台服务的教程。涉及到的知识点主要包括以下内容：【知识点目录】一.白...

PHP如何将xml转换为数组

有xml文件，PHP如何如何将xml转换为数组呢？随手搜了下，主要利用了json的编码和反编码实现，示例代码如下：$xml = '<?xml version="1.0" encoding="utf...

PHP 检测字符串是否包含繁体字

有个小众需求，需要检查字符串是否包含繁体字，随手搜了下，是用iconv实现的。具体 PHP 检测字符串是否包含繁体字 示例代码：<?php/** * 检测一个UTF-8字符串里是否包含繁体中文 * @param string $str...

发表评论

访客

◎欢迎参与讨论，请在这里发表您的看法和观点。

©5020.work 版权所有.  浙ICP备2021039468号

浙公网安备 33112402000094号
服务器提供商：蓝队云

Powered By Z-BlogPHP. Theme by TOYEAN.