• 售前

  • 售后

热门帖子
入门百科

js+Html实现表格可编辑操纵

[复制链接]
良辰743 显示全部楼层 发表于 2021-10-26 13:36:33 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了js+Html实现表格可编辑操纵的具体代码,供各人参考,具体内容如下
功能形貌:单击页面使单位格td酿成可编辑状态,输入内容后,当单位格失去核心时,生存输入的内容。
点击增加行,在table的末尾增加一行;点击删除行,删除table中最末尾的一行。     
  1. <html>  
  2.     <head>  
  3.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  4.     <title>编辑表格数据</title>  
  5.     <style type="text/css">  
  6.     <!--  
  7.     body,div,p,ul,li,font,span,td,th{  
  8.     font-size:10pt;  
  9.     line-height:155%;  
  10.     }  
  11.     table{  
  12.     border-top-width: 1px;  
  13.     border-right-width: 1px;  
  14.     border-bottom-width: 0px;  
  15.     border-left-width: 1px;  
  16.     border-top-style: solid;  
  17.     border-right-style: solid;  
  18.     border-bottom-style: none;  
  19.     border-left-style: solid;  
  20.     border-top-color: #CCCCCC;  
  21.     border-right-color: #CCCCCC;  
  22.     border-bottom-color: #CCCCCC;  
  23.     border-left-color: #CCCCCC;  
  24.     }  
  25.     td{  
  26.     border-bottom-width: 1px;  
  27.     border-bottom-style: solid;  
  28.     border-bottom-color: #CCCCCC;  
  29.     }  
  30.     .EditCell_TextBox {  
  31.     width: 90%;  
  32.     border:1px solid #0099CC;  
  33.     }  
  34.     .EditCell_DropDownList {  
  35.     width: 90%;  
  36.     }  
  37.     -->  
  38.     </style>  
  39.     <script>
  40.         /**
  41.     * JS实现可编辑的表格   
  42.     * 用法:EditTables(tb1,tb2,tb2,......);
  43.     **/  
  44.       
  45.     //设置多个表格可编辑  
  46.     function EditTables(){  
  47.     for(var i=0;i<arguments.length;i++){  
  48.        SetTableCanEdit(arguments[i]);  
  49.     }  
  50.     }  
  51.       
  52.     //设置表格是可编辑的  
  53.     function SetTableCanEdit(table){  
  54.     for(var i=1; i<table.rows.length;i++){  
  55.        SetRowCanEdit(table.rows[i]);  
  56.     }  
  57.     }  
  58.       
  59.     function SetRowCanEdit(row){  
  60.     for(var j=0;j<row.cells.length; j++){  
  61.       
  62.        //如果当前单元格指定了编辑类型,则表示允许编辑  
  63.        var editType = row.cells[j].getAttribute("EditType");  
  64.        if(!editType){  
  65.         //如果当前单元格没有指定,则查看当前列是否指定  
  66.         editType = row.parentNode.rows[0].cells[j].getAttribute("EditType");  
  67.        }  
  68.        if(editType){  
  69.         row.cells[j].onclick = function (){  
  70.          EditCell(this);  
  71.         }  
  72.        }  
  73.     }  
  74.       
  75.     }  
  76.       
  77.     //设置指定单元格可编辑  
  78.     function EditCell(element, editType){  
  79.       
  80.     var editType = element.getAttribute("EditType");  
  81.     if(!editType){  
  82.        //如果当前单元格没有指定,则查看当前列是否指定  
  83.        editType = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("EditType");  
  84.     }  
  85.       
  86.     switch(editType){  
  87.        case "TextBox":  
  88.         CreateTextBox(element, element.innerHTML);  
  89.         break;  
  90.        case "DropDownList":  
  91.         CreateDropDownList(element);  
  92.         break;  
  93.        default:  
  94.         break;  
  95.     }  
  96.     }  
  97.       
  98.     //为单元格创建可编辑输入框  
  99.     function CreateTextBox(element, value){  
  100.     //检查编辑状态,如果已经是编辑状态,跳过  
  101.     var editState = element.getAttribute("EditState");  
  102.     if(editState != "true"){  
  103.        //创建文本框  
  104.        var textBox = document.createElement("INPUT");  
  105.        textBox.type = "text";  
  106.        textBox.className="EditCell_TextBox";  
  107.         
  108.         
  109.        //设置文本框当前值  
  110.        if(!value){  
  111.         value = element.getAttribute("Value");  
  112.        }   
  113.        textBox.value = value;  
  114.         
  115.        //设置文本框的失去焦点事件  
  116.        textBox.onblur = function (){  
  117.         CancelEditCell(this.parentNode, this.value);  
  118.        }  
  119.        //向当前单元格添加文本框  
  120.        ClearChild(element);  
  121.        element.appendChild(textBox);  
  122.        textBox.focus();  
  123.        textBox.select();  
  124.         
  125.        //改变状态变量  
  126.        element.setAttribute("EditState", "true");  
  127.        element.parentNode.parentNode.setAttribute("CurrentRow", element.parentNode.rowIndex);  
  128.     }  
  129.       
  130.     }  
  131.       
  132.       
  133.     //为单元格创建选择框  
  134.     function CreateDropDownList(element, value){  
  135.     //检查编辑状态,如果已经是编辑状态,跳过  
  136.     var editState = element.getAttribute("EditState");  
  137.     if(editState != "true"){  
  138.        //创建下接框  
  139.        var downList = document.createElement("Select");  
  140.        downList.className="EditCell_DropDownList";  
  141.         
  142.        //添加列表项  
  143.        var items = element.getAttribute("DataItems");  
  144.        if(!items){  
  145.         items = element.parentNode.parentNode.rows[0].cells[element.cellIndex].getAttribute("DataItems");  
  146.        }  
  147.         
  148.        if(items){  
  149.         items = eval("[" + items + "]");  
  150.         for(var i=0; i<items.length; i++){  
  151.          var oOption = document.createElement("OPTION");  
  152.          oOption.text = items[i].text;  
  153.          oOption.value = items[i].value;  
  154.          downList.options.add(oOption);  
  155.         }  
  156.        }  
  157.         
  158.        //设置列表当前值  
  159.        if(!value){  
  160.         value = element.getAttribute("Value");  
  161.        }  
  162.        downList.value = value;  
  163.       
  164.        //设置创建下接框的失去焦点事件  
  165.        downList.onblur = function (){  
  166.         CancelEditCell(this.parentNode, this.value, this.options[this.selectedIndex].text);  
  167.        }  
  168.         
  169.        //向当前单元格添加创建下接框  
  170.        ClearChild(element);  
  171.        element.appendChild(downList);  
  172.        downList.focus();  
  173.         
  174.        //记录状态的改变  
  175.        element.setAttribute("EditState", "true");  
  176.        element.parentNode.parentNode.setAttribute("LastEditRow", element.parentNode.rowIndex);  
  177.     }  
  178.       
  179.     }  
  180.       
  181.       
  182.     //取消单元格编辑状态  
  183.     function CancelEditCell(element, value, text){  
  184.     element.setAttribute("Value", value);  
  185.     if(text){  
  186.        element.innerHTML = text;  
  187.     }else{  
  188.        element.innerHTML = value;  
  189.     }  
  190.     element.setAttribute("EditState", "false");  
  191.       
  192.     //检查是否有公式计算  
  193.     CheckExpression(element.parentNode);  
  194.     }  
  195.       
  196.     //清空指定对象的所有字节点  
  197.     function ClearChild(element){  
  198.     element.innerHTML = "";  
  199.     }  
  200.       
  201.     //添加行  
  202.     function AddRow(table, index){  
  203.     var lastRow = table.rows[table.rows.length-1];  
  204.     var newRow = lastRow.cloneNode(true);  
  205.     //计算新增加行的序号,需要引入jquery 的jar包
  206.     var startIndex = $.inArray(lastRow,table.rows);
  207.     var endIndex = table.rows;
  208.     table.tBodies[0].appendChild(newRow);  
  209.     newRow.cells[0].innerHTML=endIndex-startIndex;
  210.     SetRowCanEdit(newRow);  
  211.     return newRow;  
  212.       
  213.     }  
  214.       
  215.       
  216.     //删除行  
  217.     function DeleteRow(table, index){  
  218.     for(var i=table.rows.length - 1; i>0;i--){  
  219.        var chkOrder = table.rows[i].cells[0].firstChild;  
  220.        if(chkOrder){  
  221.         if(chkOrder.type = "CHECKBOX"){  
  222.          if(chkOrder.checked){  
  223.           //执行删除  
  224.           table.deleteRow(i);  
  225.          }  
  226.         }  
  227.        }  
  228.     }  
  229.     }  
  230.       
  231.     //提取表格的值,JSON格式  
  232.     function GetTableData(table){  
  233.     var tableData = new Array();  
  234.     alert("行数:" + table.rows.length);  
  235.     for(var i=1; i<table.rows.length;i++){  
  236.        tableData.push(GetRowData(tabProduct.rows[i]));  
  237.     }  
  238.       
  239.     return tableData;  
  240.       
  241.     }  
  242.     //提取指定行的数据,JSON格式  
  243.     function GetRowData(row){  
  244.     var rowData = {};  
  245.     for(var j=0;j<row.cells.length; j++){  
  246.        name = row.parentNode.rows[0].cells[j].getAttribute("Name");  
  247.        if(name){  
  248.         var value = row.cells[j].getAttribute("Value");  
  249.         if(!value){  
  250.          value = row.cells[j].innerHTML;  
  251.         }  
  252.          
  253.         rowData[name] = value;  
  254.        }  
  255.     }  
  256.     //alert("ProductName:" + rowData.ProductName);  
  257.     //或者这样:alert("ProductName:" + rowData["ProductName"]);  
  258.     return rowData;  
  259.       
  260.     }  
  261.       
  262.     //检查当前数据行中需要运行的字段  
  263.     function CheckExpression(row){  
  264.     for(var j=0;j<row.cells.length; j++){  
  265.        expn = row.parentNode.rows[0].cells[j].getAttribute("Expression");  
  266.        //如指定了公式则要求计算  
  267.        if(expn){  
  268.         var result = Expression(row,expn);  
  269.         var format = row.parentNode.rows[0].cells[j].getAttribute("Format");  
  270.         if(format){  
  271.          //如指定了格式,进行字值格式化  
  272.          row.cells[j].innerHTML = formatNumber(Expression(row,expn), format);  
  273.         }else{  
  274.          row.cells[j].innerHTML = Expression(row,expn);  
  275.         }  
  276.        }  
  277.         
  278.     }  
  279.     }  
  280.       
  281.     //计算需要运算的字段  
  282.     function Expression(row, expn){  
  283.     var rowData = GetRowData(row);  
  284.     //循环代值计算  
  285.     for(var j=0;j<row.cells.length; j++){  
  286.        name = row.parentNode.rows[0].cells[j].getAttribute("Name");  
  287.        if(name){  
  288.         var reg = new RegExp(name, "i");  
  289.         expn = expn.replace(reg, rowData[name].replace(/\,/g, ""));  
  290.        }  
  291.     }  
  292.     return eval(expn);  
  293.     }  
  294.       
  295.     ///  
  296.     /**
  297.     * 格式化数字显示方式   
  298.     * 用法
  299.     * formatNumber(12345.999,'#,##0.00');
  300.     * formatNumber(12345.999,'#,##0.##');
  301.     * formatNumber(123,'000000');
  302.     * @param num
  303.     * @param pattern
  304.     */  
  305.     /* 以下是范例
  306.     formatNumber('','')=0
  307.     formatNumber(123456789012.129,null)=123456789012
  308.     formatNumber(null,null)=0
  309.     formatNumber(123456789012.129,'#,##0.00')=123,456,789,012.12
  310.     formatNumber(123456789012.129,'#,##0.##')=123,456,789,012.12
  311.     formatNumber(123456789012.129,'#0.00')=123,456,789,012.12
  312.     formatNumber(123456789012.129,'#0.##')=123,456,789,012.12
  313.     formatNumber(12.129,'0.00')=12.12
  314.     formatNumber(12.129,'0.##')=12.12
  315.     formatNumber(12,'00000')=00012
  316.     formatNumber(12,'#.##')=12
  317.     formatNumber(12,'#.00')=12.00
  318.     formatNumber(0,'#.##')=0
  319.     */  
  320.     function formatNumber(num,pattern){   
  321.     var strarr = num?num.toString().split('.'):['0'];   
  322.     var fmtarr = pattern?pattern.split('.'):[''];   
  323.     var retstr='';   
  324.         
  325.     // 整数部分   
  326.     var str = strarr[0];   
  327.     var fmt = fmtarr[0];   
  328.     var i = str.length-1;      
  329.     var comma = false;   
  330.     for(var f=fmt.length-1;f>=0;f--){   
  331.         switch(fmt.substr(f,1)){   
  332.           case '#':   
  333.             if(i>=0 ) retstr = str.substr(i--,1) + retstr;   
  334.             break;   
  335.           case '0':   
  336.             if(i>=0) retstr = str.substr(i--,1) + retstr;   
  337.             else retstr = '0' + retstr;   
  338.             break;   
  339.           case ',':   
  340.             comma = true;   
  341.             retstr=','+retstr;   
  342.             break;   
  343.         }   
  344.     }   
  345.     if(i>=0){   
  346.         if(comma){   
  347.           var l = str.length;   
  348.           for(;i>=0;i--){   
  349.             retstr = str.substr(i,1) + retstr;   
  350.             if(i>0 && ((l-i)%3)==0) retstr = ',' + retstr;     
  351.           }   
  352.         }   
  353.         else retstr = str.substr(0,i+1) + retstr;   
  354.     }   
  355.         
  356.     retstr = retstr+'.';   
  357.     // 处理小数部分   
  358.     str=strarr.length>1?strarr[1]:'';   
  359.     fmt=fmtarr.length>1?fmtarr[1]:'';   
  360.     i=0;   
  361.     for(var f=0;f<fmt.length;f++){   
  362.         switch(fmt.substr(f,1)){   
  363.           case '#':   
  364.             if(i<str.length) retstr+=str.substr(i++,1);   
  365.             break;   
  366.           case '0':   
  367.             if(i<str.length) retstr+= str.substr(i++,1);   
  368.             else retstr+='0';   
  369.             break;   
  370.         }   
  371.     }   
  372.     return retstr.replace(/^,+/,'').replace(/\.$/,'');   
  373.     }  
  374.     </script>
  375.     </head>  
  376.       
  377.     <body>  
  378.     <form id="form1" name="form1" method="post" action="">  
  379.     <h3>可编辑的表格</h3>  
  380.     <table width="698" border="0" cellpadding="0" cellspacing="0" id="tabProduct">  
  381.         <tr>  
  382.           <td width="32" align="center" bgcolor="#EFEFEF" Name="Num"><input type="checkbox" name="checkbox" value="checkbox" /></td>  
  383.           <td width="186" bgcolor="#EFEFEF" Name="Num" EditType="TextBox">序号</td>  
  384.           <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>  
  385.           <td width="103" bgcolor="#EFEFEF" Name="Amount" EditType="TextBox">数量</td>  
  386.           <td width="103" bgcolor="#EFEFEF" Name="Price" EditType="TextBox">单价</td>  
  387.           <td width="120" bgcolor="#EFEFEF" Name="SumMoney" Expression="Amount*Price" Format="#,###.00">合计</td>  
  388.         </tr>  
  389.         <tr>  
  390.           <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox2" value="checkbox" /></td>  
  391.           <td bgcolor="#FFFFFF">1</td>  
  392.           <td bgcolor="#FFFFFF" Value="c">C</td>  
  393.           <td bgcolor="#FFFFFF">0</td>  
  394.           <td bgcolor="#FFFFFF">0</td>  
  395.           <td bgcolor="#FFFFFF">0</td>  
  396.         </tr>  
  397.         <tr>  
  398.           <td align="center" bgcolor="#FFFFFF"><input type="checkbox" name="checkbox22" value="checkbox" /></td>  
  399.           <td bgcolor="#FFFFFF">2</td>  
  400.           <td bgcolor="#FFFFFF" Value="d">D</td>  
  401.           <td bgcolor="#FFFFFF">0</td>  
  402.           <td bgcolor="#FFFFFF">0</td>  
  403.           <td bgcolor="#FFFFFF">0</td>  
  404.         </tr>  
  405.     </table>  
  406.       
  407.     <br />  
  408.     <input type="button" name="Submit" value="新增" onclick="AddRow(document.getElementById('tabProduct'),1)" />  
  409.     <input type="button" name="Submit2" value="删除" onclick="DeleteRow(document.getElementById('tabProduct'),1)" />  
  410.     <input type="button" name="Submit22" value="重置" onclick="window.location.reload()" />  
  411.     <input type="submit" name="Submit3" value="提交" onclick="GetTableData(document.getElementById('tabProduct'));return false;" />  
  412.     </form>  
  413.       
  414.     <script language="javascript" src="GridEdit.js"></script>  
  415.     <script language="javascript">  
  416.     var tabProduct = document.getElementById("tabProduct");  
  417.       
  418.     // 设置表格可编辑  
  419.     // 可一次设置多个,例如:EditTables(tb1,tb2,tb2,......)  
  420.     EditTables(tabProduct);  
  421.       
  422.       
  423.     </script>  
  424.     </body>  
  425. </html>
复制代码
结果如下:

以上就是本文的全部内容,盼望对各人的学习有所资助,也盼望各人多多支持脚本之家。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作