1.       可以和后台进行互动，通过第一列的值进行ajax请求。然后给后面的单元格进行赋值操作。支持键盘添加一行、删除一行表格、支持上下左右，快捷移到获得焦点操作。以及键盘事件对数字进行验证等。  
    3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
    4. <html>  
    5.   <head>  
    6.     <title>table editor</title>  
    7.     <meta http-equiv="pragma" content="no-cache">  
    8.     <meta http-equiv="cache-control" content="no-cache">  
    9.     <meta http-equiv="expires" content="0">      
    10.     <script type="text/javascript" src="jquery.js"></script>  
    11.     <style type="text/css">  
    12.         .tableRow1 {  
    13.             background-color: #E6F3FC;  
    14.         }  
    15.         .tableRow2 {  
    16.             background-color: #ffffff;  
    17.         }  
    19.         .tableRow3 {  
    20.             background-color: #FFFFC9;  
    21.             color: #D40F16;  
    22.         }  
    24.         .tableHead {  
    25.             font-size: 12px;  
    26.             color: #FFFFFF;  
    27.             font-weight: bold;  
    28.             white-space: nowrap;  
    29.             word-break : keep-all ;  
    30.             background-color: #2897E6;  
    31.         }  
    32.     </style>  
    33.     <script type="text/javascript">  
    34.         var htmlTemplate = '<tr align="center"><td><input type="text" name="report_num" size="20"/>';  
    35.         htmlTemplate += '<input type="hidden" name="consign_id"/><br/>';  
    36.         htmlTemplate += '<span name="msg" style="color: red;"></span></td>';  
    37.         htmlTemplate += '<td><input type="text" name="contract_num" size="15"/></td>';  
    38.         htmlTemplate += '<td><input type="text" name="wt_num" size="15"/></td>';  
    39.         htmlTemplate += '<td><input type="text" name="wt_company" size="20"/></td>'  
    40.         htmlTemplate += '<td><input type="text" name="project_name" size="20"/></td>'  
    41.         htmlTemplate += '<td><input type="text" name="project_address" size="20"/></td>';  
    42.         htmlTemplate += '<td><input type="hidden" name="item_id"/><input type="text" name="item_name" size="15"/></td>';  
    43.         htmlTemplate += '<td><input type="text" name="report_count" size="3"/></td>';  
    44.         htmlTemplate += '<td><input type="text" name="price" size="5"/></td>';  
    45.         htmlTemplate += '<td><input type="text" name="amount" size="5"/></td>';  
    46.         htmlTemplate += '<td><input type="text" name="ought_fare" size="5"/></td></tr>';  
    48.         //添加一行表格记录  
    49.         function addRowEl(textInput, currentEL) {  
    50.             //textInput = $(this),jQuery会自动传入触发当前事件的一个对象，即textInput，也就是这里的$(this)             
    51.             var el = currentEL == undefined ? $(this) : currentEL;    
    52.             if (el.attr("name") == "report_num") {  
    53.                 getReportInfo(el);  
    54.             } else {  
    55.                 var trEl = el.parent().parent();  
    56.                 if (isAdd(trEl)) {  
    57.                     //var tabEl = $(this).parentsUntil("table");  
    58.                     //trEl.clone(true).appendTo(trEl.parent());  
    59.                     var template = $(htmlTemplate);  
    60.                     template.appendTo(trEl.parent());  
    61.                     template.find(":text").focusin(onReportNum).focusout(onLoadReportInfo).keyup(onInputKeyUp);  
    62.                     template.find(":text[name='report_num']").focus().focusin();  
    63.                     addClass();  
    64.                 }  
    65.             }  
    66.         }  
    68.         //失去焦点时，添加一条tr行记录  
    69.         function onReportNum() {  
    70.             var el = $(this);  
    71.             var trEl = el.parent().parent();  
    72.             if (el.attr("name") == "report_num") {  
    73.                 if (el.val() == "") {  
    74.                     var userName = "H";  
    75.                     if (userName.length > 0) {  
    76.                         el.val(userName.substring(0, 1) + new Date().getYear());  
    77.                     }  
    78.                 }  
    79.                 if (isAdd(trEl)) {  
    80.                     var template = $(htmlTemplate);  
    81.                     template.appendTo(trEl.parent());  
    82.                     template.find(":text").focusin(onReportNum).focusout(onLoadReportInfo).keyup(onInputKeyUp);  
    83.                     template.find(":text[name='report_num']").focusin(onReportNum).focus().focusin();  
    84.                     addClass();  
    85.                 }  
    86.             } else if (el.attr("name") == "ought_fare") {  
    87.                 var price = trEl.find(":text[name='price']").val();  
    88.                 var count = trEl.find(":text[name='amount']").val();  
    89.                 if (price != "" && count != "") {  
    90.                     el.val(parseFloat(price)*parseInt(count));  
    91.                 }  
    92.             }   
    93.         }  
    95.         //验证字段值是否为空，不为空则可以添加一行  
    96.         function isAdd(trEl) {  
    97.             var allInput = trEl.parent().find(":text");  
    98.             for (var i = 0; i < allInput.length; i++) {  
    99.                 var temp = $(allInput[i]);  
    100.                 var index = $.inArray(temp.attr("name"), ["report_num", "contract_num", "wt_num", "wt_company", "project_name", "item_name"]);  
    101.                 if (index != -1) {  
    102.                     if (temp.attr("name") == "report_num") {  
    103.                         if (temp.val() == "E2010" || temp.val() == "") {  
    104.                             return false;  
    105.                         }  
    106.                     } else {  
    107.                         if(temp.val() == "") {  
    108.                             return false;  
    109.                         }  
    110.                     }  
    111.                 }  
    112.             }  
    113.             return true;  
    114.         }  
    116.         function flaotInputOnly() {  
    117.             if (event.keyCode > 57 || event.keyCode < 46 || event.keyCode == 47)  
    118.                 event.keyCode = 0;  
    119.         }  
    121.         String.prototype.replaceAll = function(s1, s2) {   
    122.             return this.replace(new RegExp(s1, "gm"), s2); //g全局  
    123.         }                 
    125.         //获得当前光标的索引  
    126.         function getFocusIndex(aryTr, currentEL) {  
    127.             var i = 0;  
    128.             var j = -1;  
    129.             $(aryTr).each(function () {//得到当前元素索引  
    130.                 if (currentEL.attr("name") == $(this).attr("name")) {  
    131.                     j = i;  
    132.                 }  
    133.                 i++;  
    134.             });  
    135.             return j;     
    136.         }  
    138.         function onInputKeyUp(e) {  
    139.             var event = e || window.event;  
    140.             var currKeyCode = event.keyCode || event.which || event.charCode;  
    141.             var currentEL = $(this);  
    142.             if (currentEL.attr("name") == "report_count" || currentEL.attr("name") == "amount") {  
    143.                 currentEL.val(currentEL.val().replace(//D/g,''));//验证整数  
    144.             } else if (currentEL.attr("name") == "price" || currentEL.attr("name") == "ought_fare") {  
    145.                 var val = currentEL.val();//验证小数  
    146.                 if (parseFloat(val) != val) {  
    147.                     var ar = val.split('');  
    148.                     for(var i = 0; i < ar.length; i++) {  
    149.                         var charCode = ar[i].charCodeAt(0);  
    150.                         if (charCode > 57 || charCode < 46 || charCode == 47) {  
    151.                             currentEL.val(val.replaceAll(ar[i], ''));  
    152.                         }  
    153.                     }  
    154.                 }     
    155.             }  
    156.             var currentTd = currentEL.parent();  
    157.             var currentTr = currentTd.parent();  
    158.             var aryTr = currentTr.find(":text").toArray();  
    159.             var nextTd = currentTd.next("td");  
    160.             var prevTd = currentTd.prev("td");  
    161.             //alert(e.keyCode + ":" + currKeyCode);  
    162.             if (currKeyCode == 13) {//回车，enter键  
    163.                 nextTd.find(":text").focus().focusin();//获得下一文本域让其获得焦点  
    164.                 addRowEl(undefined, currentEL);//添加一行  
    165.             } else if (currKeyCode == 45) { //insert键，添加一行  
    166.                 addRowEl(undefined, currentEL);  
    167.             } else if (currKeyCode == 46) { //delete键，删除一行  
    168.                 var tab = currentTr.parent();  
    169.                 var j = getFocusIndex(aryTr, currentEL);      
    170.                 var prevTr = currentTr.prev("tr");  
    171.                 var prevInput = prevTr.find(":text:eq(" + j + ")");  
    172.                 if (prevInput.attr("name") != undefined) {  
    173.                     prevInput.focus().focusin();  
    174.                 }                     
    175.                 if (tab.get(0).rows.length != 2) {  
    176.                     currentTr.remove();  
    177.                 }  
    178.             } else if (currKeyCode == 39) { //right键，后一个、右  
    179.                 //如果是报告编号文本域就调用ajax方法并设置委托的信息  
    180.                 onLoadReportInfo(undefined, currentEL);  
    181.                 nextTd.find(":text").focus().focusin();  
    182.             } else if (currKeyCode == 38) {//up键，上  
    183.                 onLoadReportInfo(undefined, currentEL);  
    184.                 //得到当前元素索引  
    185.                 var j = getFocusIndex(aryTr, currentEL);  
    186.                 var prevTr = currentTr.prev("tr");  
    187.                 var prevInput = prevTr.find(":text:eq(" + j + ")");  
    188.                 if (prevInput.attr("name") != undefined) {  
    189.                     prevInput.focus().focusin();  
    190.                 }                             
    191.             } else if (currKeyCode == 40) {//down键，下一个  
    192.                 onLoadReportInfo(undefined, currentEL);  
    193.                 var j = getFocusIndex(aryTr, currentEL);  
    194.                 var nextTr = currentTr.next("tr");  
    195.                 var nextInput = nextTr.find(":text:eq(" + j + ")");  
    196.                 if (nextInput.attr("name") != undefined) {  
    197.                     nextInput.focus().focusin();  
    198.                 }     
    199.             } else if (currKeyCode == 37) {//left键，左、前  
    200.                 onLoadReportInfo(undefined, currentEL);  
    201.                 prevTd.find(":text").focus().focusin();  
    202.             }         
    203.         }     
    205.         //根据报告编号加载委托信息  
    206.         function onLoadReportInfo(textInput, currentEL) {  
    207.             var el = currentEL == undefined ? $(this) : currentEL;    
    208.             if (el.attr("name") == "report_num") {  
    209.                 getReportInfo(el);  
    210.             }  
    211.         }  
    213.         //ajax请求，通过报告编号获得委托信息  
    214.         function getReportInfo(el) {  
    215.             var reportNum = $(el);  
    216.             var trEl = reportNum.parent().parent();  
    217.             var idEL = reportNum.next(":hidden[name='id']");  
    218.             var reportVal = reportNum.val();  
    219.             var aryNum = $("#sealTab :text[name='report_num']").toArray();  
    220.             var aryResult = $.grep(aryNum, function (o) {  
    221.                 return $(o).val() == reportVal;   
    222.             });  
    223.             if (aryResult.length > 1) {  
    224.                 reportNum.parent().find("span[name='msg']").text("该编号已申请,确定重复申请!");  
    225.                 reportNum.attr("flag", "exist");  
    226.                 //return;  
    227.             }  
    228.             if (reportVal != "") {  
    229.                 $.post("transaction/reportSeal.do?method=getInfo", {id: idEL.val(), REPORT_NUM: reportVal}, function (data) {  
    230.                     var rs = eval(data);  
    231.                     if (rs.length > 0) {  
    232.                         if (!rs[0].valid){  
    233.                             reportNum.parent().find("span[name='msg']").text("没有查询到该编号的信息!");  
    234.                             reportNum.attr("flag", "invalid");  
    235.                             return;  
    236.                         } else {  
    237.                             if (rs.length > 2) {  
    238.                                 $.each(rs[2], function (field, value) {  
    239.                                     if (value != "") {  
    240.                                         trEl.find("input[name='" + field + "']").val(value);  
    241.                                     }  
    242.                                 });  
    243.                             }  
    244.                         }  
    245.                         if (!rs[1].exists) {  
    246.                             reportNum.parent().find("span[name='msg']").empty();  
    247.                             reportNum.attr("flag", "valid");                              
    248.                         } else {  
    249.                             reportNum.parent().find("span[name='msg']").text("该编号已申请,确定重复申请!");  
    250.                             reportNum.attr("flag", "exist");  
    251.                         }  
    252.                     }   
    253.                 });  
    254.             }  
    255.         }  
    257.         $(function () {  
    258.             addClass();  
    259.             //为sealTab中所有的文本域添加获得焦点、事情焦点事件  
    260.             $("#sealTab :text").focusin(onReportNum).keyup(onInputKeyUp).focusout(onLoadReportInfo);  
    261.         });  
    263.         function addClass() {  
    264.             $("#sealTr").nextAll().each(function (i) {  
    265.                 return i % 2 == 0 ? $(this).addClass("tableRow1").removeClass("tableRow2") : $(this).addClass("tableRow2").removeClass("tableRow1");  
    266.             });  
    267.         }  
    268.     </script>  
    269.   </head>  
    271.   <body bgcolor="#ffffff">  
    272.     <font color="red" style="font-size: 12px;">注意：*标记的列表格为必填的；insert插入一行（*号标记数据填写完整时）、delete键删除当前行（一行记录时不能删除）</font>  
    273.     <table id="sealTab" width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#C7CED4">  
    274.         <tr id="sealTr" class="tableHead" valign="middle">  
    275.           <td align="center">  
    276.               <span style="color:#ffffff">报告编号</span>  
    277.               <font color="red">*</font>  
    278.           </td>  
    279.           <td align="center">  
    280.               <span style="color:#ffffff">合同编号</span>  
    281.           </td>  
    282.           <td align="center">  
    283.               <span style="color:#ffffff">委托编号</span>  
    284.           </td>  
    285.           <td align="center">  
    286.             <span style="color:#ffffff">委托单位</span>  
    287.           </td>  
    288.           <td align="center">  
    289.             <span style="color:#ffffff">工程名称</span>  
    290.           </td>  
    291.           <td align="center">  
    292.               <span style="color:#ffffff">工程地点</span>  
    293.           </td>  
    294.           <td align="center">  
    295.               <span style="color:#ffffff">检测项目</span>  
    296.           </td>  
    297.           <td align="center">  
    298.               <span style="color:#ffffff">份数</span>  
    299.           </td>  
    300.           <td align="center">  
    301.               <span style="color:#ffffff">单价</span>  
    302.           </td>  
    303.           <td align="center">  
    304.               <span style="color:#ffffff">数量</span>  
    305.           </td>  
    306.            <td align="center">  
    307.               <span style="color:#ffffff">总价</span>  
    308.           </td>  
    309.         </tr>  
    310.         <tr align="center">  
    311.           <td>  
    312.               <input type="text" name="report_num" size="20"/>  
    313.               <input type="hidden" name="id"/>  
    314.               <input type="hidden" name="consign_id"/>  
    315.               <span name="msg" style="color: red;"></span>  
    316.           </td>  
    317.           <td>  
    318.             <input type="text" name="contract_num" size="15"/>  
    319.           </td>  
    320.           <td>  
    321.               <input type="text" name="wt_num" size="15"/>  
    322.           </td>  
    323.           <td>  
    324.             <input type="text" name="wt_company" size="20"/>  
    325.           </td>  
    326.           <td>  
    327.             <input type="text" name="project_name" size="20"/>  
    328.           </td>  
    329.           <td>  
    330.               <input type="text" name="project_address" size="20"/>  
    331.           </td>  
    332.           <td>  
    333.               <input type="hidden" name="item_id"/>  
    334.               <input type="text" name="item_name" size="15"/>  
    335.           </td>  
    336.           <td>  
    337.               <input type="text" name="report_count" size="3"/>  
    338.           </td>  
    339.           <td>  
    340.               <input type="text" name="price" size="5"/>  
    341.           </td>  
    342.           <td>  
    343.               <input type="text" name="amount" size="5"/>  
    344.           </td>  
    345.           <td>  
    346.             <input type="text" name="ought_fare" size="5"/>  
    347.           </td>  
    348.         </tr>  
    349.       </table>  
    350.   </body>  
    351. </html>
    352.     
    1.       //ajax请求相关java code：  
    2.          public String getConsigJSON(String reportNum, String id) throws Exception {  
    3.         String sql = "select top 1 m.id as consign_id, contract_num,wt_num,wt_company,project_name,project_prov+project_city+project_area project_address,m.report_count,item_id,ought_fare,s.name item_name from MM_Consign m, SS_subject s where item_id = s.id and report_num = '" + reportNum + "'";  
    4.         StringBuffer json = new StringBuffer("[");  
    5.         try {  
    6.             stmt = conn.createStatement();  
    7.             rs = stmt.executeQuery(sql);  
    8.             ResultSetMetaData rsmd = rs.getMetaData();  
    9.             RowSetDynaClass rsdc = new RowSetDynaClass(rs);  
    10.             List list = rsdc.getRows();  
    11.             /*if ("".equals(id)) { 
    12.                 String validValue = isValid(reportNum); 
    13.                 json.append("{valid:").append(validValue).append("},"); 
    14.                 String existsValue = this.isExists(reportNum); 
    15.                 json.append("{exists:").append(existsValue).append("}"); 
    16.             } else {*/  
    17.                 String num = getReportNum(id);  
    18.                 if (num.equals(reportNum)) {  
    19.                     json.append("{valid:true},");  
    20.                     json.append("{exists:false}");  
    21.                 } else {  
    22.                     String validValue = isValid(reportNum);  
    23.                     json.append("{valid:").append(validValue).append("},");  
    24.                     String existsValue = this.isExists(reportNum);  
    25.                     json.append("{exists:").append(existsValue).append("}");  
    26.                 }  
    27.             //}  
    28.             for (int j = 0, len = list.size(); j < len; j++) {  
    29.                 json.append(",{");  
    30.                 DynaBean dyna = (DynaBean) list.get(j);  
    31.                 for (int i = 1; i <= rsmd.getColumnCount(); i++) {  
    32.                     if (i == rsmd.getColumnCount()) {  
    33.                         json.append(rsmd.getColumnName(i)).append(":/"")  
    34.                         .append(FunctionStatic.getNullString(BeanUtils.getSimpleProperty(dyna, rsmd.getColumnName(i).toLowerCase())))  
    35.                         .append("/"");  
    36.                     } else {  
    37.                         json.append(rsmd.getColumnName(i)).append(":/"")  
    38.                                 .append(FunctionStatic.getNullString(BeanUtils.getSimpleProperty(dyna, rsmd.getColumnName(i).toLowerCase())))  
    39.                                 .append("/",");  
    40.                     }  
    41.                 }  
    42.                 json.append("}");  
    43.                 /*if (j < len - 1) { 
    44.                     json.append(","); 
    45.                 }*/  
    46.             }  
    47.             json.append("]");  
    48.         } catch (Exception e) {  
    49.             e.printStackTrace();  
    50.             throw e;  
    51.         }  
    52.         return json.toString();  
    53.     }  
    55.         public String isValid(String reportNum) throws Exception {  
    56.         String bool = "";  
    57.         try {  
    58.             prepar = conn.prepareStatement("select count(*) from MM_Consign where report_num = '" + reportNum + "'");  
    59.             rs = prepar.executeQuery();  
    60.             int count = rs.next() ? rs.getInt(1) : 0;  
    61.             bool = count > 0 ? "true" : "false";   
    62.         } catch (Exception e) {  
    63.             e.printStackTrace();  
    64.             throw e;  
    65.         }  
    66.         return bool;  
    67.     }  
    69.         public String isExists(String reportNum) throws Exception {  
    70.         String bool = "";  
    71.         try {  
    72.             prepar = conn.prepareStatement("select count(*) from MM_ReportTransfer where report_num = '" + reportNum + "'");  
    73.             rs = prepar.executeQuery();  
    74.             int count = rs.next() ? rs.getInt(1) : 0;  
    75.             bool = count > 0 ? "true" : "false";   
    76.         } catch (Exception e) {  
    77.             e.printStackTrace();  
    78.             throw e;  
    79.         }  
    80.         return bool;  
    81.     } 
    82.