可以和後台進行互動，通過第一列的值進行ajax請求。然後給後面的儲存格進行賦值操作。支援鍵盤添加一行、刪除一行表格、支援上下左右，快捷移到獲得焦點操作。以及鍵盤事件對數字進行驗證等。</p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br /><html><br /> <head><br /> <title>table editor</title><br /><meta http-equiv="pragma" content="no-cache"><br /><meta http-equiv="cache-control" content="no-cache"><br /><meta http-equiv="expires" content="0"><br /><script type="text/javascript" src="jquery.js"></script><br /><style type="text/css"><br />.tableRow1 {<br />background-color: #E6F3FC;<br />}<br />.tableRow2 {<br />background-color: #ffffff;<br />}</p><p>.tableRow3 {<br />background-color: #FFFFC9;<br />color: #D40F16;<br />}</p><p>.tableHead {<br />font-size: 12px;<br />color: #FFFFFF;<br />font-weight: bold;<br />white-space: nowrap;<br /> word-break : keep-all ;<br />background-color: #2897E6;<br />}<br /></style><br /><script type="text/javascript"><br />var htmlTemplate = '<tr align="center"><td><input type="text" name="report_num" size="20"/>';<br />htmlTemplate += '<input type="hidden" name="consign_id"/><br/>';<br /> htmlTemplate += '<span name="msg" style="color: red;"></span></td>';<br /> htmlTemplate += '<td><input type="text" name="contract_num" size="15"/></td>';<br /> htmlTemplate += '<td><input type="text" name="wt_num" size="15"/></td>';<br /> htmlTemplate += '<td><input type="text" name="wt_company" size="20"/></td>'<br /> htmlTemplate += '<td><input type="text" name="project_name" size="20"/></td>'<br /> htmlTemplate += '<td><input type="text" name="project_address" size="20"/></td>';<br /> htmlTemplate += '<td><input type="hidden" name="item_id"/><input type="text" name="item_name" size="15"/></td>';<br /> htmlTemplate += '<td><input type="text" name="report_count" size="3"/></td>';<br /> htmlTemplate += '<td><input type="text" name="price" size="5"/></td>';<br /> htmlTemplate += '<td><input type="text" name="amount" size="5"/></td>';<br /> htmlTemplate += '<td><input type="text" name="ought_fare" size="5"/></td></tr>';</p><p>//添加一行表格記錄<br />function addRowEl(textInput, currentEL) {<br />//textInput = $(this),jQuery會自動傳入觸發當前事件的一個對象，即textInput，也就是這裡的$(this)<br />var el = currentEL == undefined ? $(this) : currentEL;<br />if (el.attr("name") == "report_num") {<br />getReportInfo(el);<br />} else {<br />var trEl = el.parent().parent();<br />if (isAdd(trEl)) {<br />//var tabEl = $(this).parentsUntil("table");<br />//trEl.clone(true).appendTo(trEl.parent());<br />var template = $(htmlTemplate);<br />template.appendTo(trEl.parent());<br />template.find(":text").focusin(onReportNum).focusout(onLoadReportInfo).keyup(onInputKeyUp);<br />template.find(":text[name='report_num']").focus().focusin();<br />addClass();<br />}<br />}<br />}</p><p>//失去焦點時，添加一條tr行記錄<br />function onReportNum() {<br />var el = $(this);<br />var trEl = el.parent().parent();<br />if (el.attr("name") == "report_num") {<br />if (el.val() == "") {<br />var userName = "H";<br />if (userName.length > 0) {<br />el.val(userName.substring(0, 1) + new Date().getYear());<br />}<br />}<br />if (isAdd(trEl)) {<br />var template = $(htmlTemplate);<br />template.appendTo(trEl.parent());<br />template.find(":text").focusin(onReportNum).focusout(onLoadReportInfo).keyup(onInputKeyUp);<br />template.find(":text[name='report_num']").focusin(onReportNum).focus().focusin();<br />addClass();<br />}<br />} else if (el.attr("name") == "ought_fare") {<br />var price = trEl.find(":text[name='price']").val();<br />var count = trEl.find(":text[name='amount']").val();<br />if (price != "" && count != "") {<br />el.val(parseFloat(price)*parseInt(count));<br />}<br />}<br />}</p><p>//驗證欄位值是否為空白，不為空白則可以添加一行<br />function isAdd(trEl) {<br />var allInput = trEl.parent().find(":text");<br />for (var i = 0; i < allInput.length; i++) {<br />var temp = $(allInput[i]);<br />var index = $.inArray(temp.attr("name"), ["report_num", "contract_num", "wt_num", "wt_company", "project_name", "item_name"]);<br />if (index != -1) {<br />if (temp.attr("name") == "report_num") {<br />if (temp.val() == "E2010" || temp.val() == "") {<br />return false;<br />}<br />} else {<br />if(temp.val() == "") {<br />return false;<br />}<br />}<br />}<br />}<br />return true;<br />}</p><p>function flaotInputOnly() {<br /> if (event.keyCode > 57 || event.keyCode < 46 || event.keyCode == 47)<br /> event.keyCode = 0;<br />}</p><p>String.prototype.replaceAll = function(s1, s2) {<br /> return this.replace(new RegExp(s1, "gm"), s2); //g全域<br />}</p><p>//獲得當前游標的索引<br />function getFocusIndex(aryTr, currentEL) {<br />var i = 0;<br />var j = -1;<br />$(aryTr).each(function () {//得到當前元素索引<br />if (currentEL.attr("name") == $(this).attr("name")) {<br />j = i;<br />}<br />i++;<br />});<br />return j;<br />}</p><p>function onInputKeyUp(e) {<br />var event = e || window.event;<br />var currKeyCode = event.keyCode || event.which || event.charCode;<br />var currentEL = $(this);<br />if (currentEL.attr("name") == "report_count" || currentEL.attr("name") == "amount") {<br />currentEL.val(currentEL.val().replace(//D/g,''));//驗證整數<br />} else if (currentEL.attr("name") == "price" || currentEL.attr("name") == "ought_fare") {<br />var val = currentEL.val();//驗證小數<br />if (parseFloat(val) != val) {<br />var ar = val.split('');<br />for(var i = 0; i < ar.length; i++) {<br />var charCode = ar[i].charCodeAt(0);<br />if (charCode > 57 || charCode < 46 || charCode == 47) {<br /> currentEL.val(val.replaceAll(ar[i], ''));<br />}<br />}<br />}<br />}<br />var currentTd = currentEL.parent();<br />var currentTr = currentTd.parent();<br />var aryTr = currentTr.find(":text").toArray();<br />var nextTd = currentTd.next("td");<br />var prevTd = currentTd.prev("td");<br />//alert(e.keyCode + ":" + currKeyCode);<br />if (currKeyCode == 13) {//斷行符號，enter鍵<br />nextTd.find(":text").focus().focusin();//獲得下一文本域讓其獲得焦點<br />addRowEl(undefined, currentEL);//添加一行<br />} else if (currKeyCode == 45) { //insert鍵，添加一行<br />addRowEl(undefined, currentEL);<br />} else if (currKeyCode == 46) { //delete鍵，刪除一行<br />var tab = currentTr.parent();<br />var j = getFocusIndex(aryTr, currentEL);<br />var prevTr = currentTr.prev("tr");<br />var prevInput = prevTr.find(":text:eq(" + j + ")");<br />if (prevInput.attr("name") != undefined) {<br />prevInput.focus().focusin();<br />}<br />if (tab.get(0).rows.length != 2) {<br />currentTr.remove();<br />}<br />} else if (currKeyCode == 39) { //right鍵，後一個、右<br />//如果是報告編號文本域就調用ajax方法並設定委託的資訊<br />onLoadReportInfo(undefined, currentEL);<br />nextTd.find(":text").focus().focusin();<br />} else if (currKeyCode == 38) {//up鍵，上<br />onLoadReportInfo(undefined, currentEL);<br />//得到當前元素索引<br />var j = getFocusIndex(aryTr, currentEL);<br />var prevTr = currentTr.prev("tr");<br />var prevInput = prevTr.find(":text:eq(" + j + ")");<br />if (prevInput.attr("name") != undefined) {<br />prevInput.focus().focusin();<br />}<br />} else if (currKeyCode == 40) {//down鍵，下一個<br />onLoadReportInfo(undefined, currentEL);<br />var j = getFocusIndex(aryTr, currentEL);<br />var nextTr = currentTr.next("tr");<br />var nextInput = nextTr.find(":text:eq(" + j + ")");<br />if (nextInput.attr("name") != undefined) {<br />nextInput.focus().focusin();<br />}<br />} else if (currKeyCode == 37) {//left鍵，左、前<br />onLoadReportInfo(undefined, currentEL);<br />prevTd.find(":text").focus().focusin();<br />}<br />}</p><p>//根據報告編號載入委託資訊<br />function onLoadReportInfo(textInput, currentEL) {<br />var el = currentEL == undefined ? $(this) : currentEL;<br />if (el.attr("name") == "report_num") {<br />getReportInfo(el);<br />}<br />}</p><p>//ajax請求，通過報告編號獲得委託資訊<br />function getReportInfo(el) {<br />var reportNum = $(el);<br />var trEl = reportNum.parent().parent();<br />var idEL = reportNum.next(":hidden[name='id']");<br />var reportVal = reportNum.val();<br />var aryNum = $("#sealTab :text[name='report_num']").toArray();<br />var aryResult = $.grep(aryNum, function (o) {<br />return $(o).val() == reportVal;<br />});<br />if (aryResult.length > 1) {<br />reportNum.parent().find("span[name='msg']").text("該編號已申請,確定重複申請!");<br />reportNum.attr("flag", "exist");<br />//return;<br />}<br />if (reportVal != "") {<br />$.post("transaction/reportSeal.do?method=getInfo", {id: idEL.val(), REPORT_NUM: reportVal}, function (data) {<br />var rs = eval(data);<br />if (rs.length > 0) {<br />if (!rs[0].valid){<br />reportNum.parent().find("span[name='msg']").text("沒有查詢到該編號的資訊!");<br />reportNum.attr("flag", "invalid");<br />return;<br />} else {<br />if (rs.length > 2) {<br />$.each(rs[2], function (field, value) {<br />if (value != "") {<br />trEl.find("input[name='" + field + "']").val(value);<br />}<br />});<br />}<br />}<br />if (!rs[1].exists) {<br />reportNum.parent().find("span[name='msg']").empty();<br />reportNum.attr("flag", "valid");<br />} else {<br />reportNum.parent().find("span[name='msg']").text("該編號已申請,確定重複申請!");<br />reportNum.attr("flag", "exist");<br />}<br />}<br />});<br />}<br />}</p><p>$(function () {<br />addClass();<br />//為sealTab中所有的文本域添加獲得焦點、事情焦時間點事件<br />$("#sealTab :text").focusin(onReportNum).keyup(onInputKeyUp).focusout(onLoadReportInfo);<br />});</p><p>function addClass() {<br />$("#sealTr").nextAll().each(function (i) {<br />return i % 2 == 0 ? $(this).addClass("tableRow1").removeClass("tableRow2") : $(this).addClass("tableRow2").removeClass("tableRow1");<br />});<br />}<br /></script><br /> </head></p><p> <body bgcolor="#ffffff"><br /> <font color="red" style="font-size: 12px;">注意：*標記的列表格為必填的；insert插入一行（*號標記資料填寫完整時）、delete鍵刪除當前行（一行記錄時不能刪除）</font><br /> <table id="sealTab" width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#C7CED4"><br /> <tr id="sealTr" class="tableHead" valign="middle"><br /> <td align="center"><br /> <span style="color:#ffffff">報告編號</span><br /> <font color="red">*</font><br /> </td><br /> <td align="center"><br /> <span style="color:#ffffff">合約編號</span><br /> </td><br /> <td align="center"><br /> <span style="color:#ffffff">委託編號</span><br /> </td><br /> <td align="center"><br /> <span style="color:#ffffff">委託單位</span><br /> </td><br /> <td align="center"><br /> <span style="color:#ffffff">工程名稱</span><br /> </td><br /> <td align="center"><br /> <span style="color:#ffffff">工程地點</span><br /> </td><br /> <td align="center"><br /> <span style="color:#ffffff">檢測項目</span><br /> </td><br /> <td align="center"><br /> <span style="color:#ffffff">份數</span><br /> </td><br /> <td align="center"><br /> <span style="color:#ffffff">單價</span><br /> </td><br /> <td align="center"><br /> <span style="color:#ffffff">數量</span><br /> </td><br /> <td align="center"><br /> <span style="color:#ffffff">總價</span><br /> </td><br /> </tr><br /> <tr align="center"><br /> <td><br /> <input type="text" name="report_num" size="20"/><br /> <input type="hidden" name="id"/><br /> <input type="hidden" name="consign_id"/><br /> <span name="msg" style="color: red;"></span><br /> </td><br /> <td><br /> <input type="text" name="contract_num" size="15"/><br /> </td><br /> <td><br /> <input type="text" name="wt_num" size="15"/><br /> </td><br /> <td><br /> <input type="text" name="wt_company" size="20"/><br /> </td><br /> <td><br /> <input type="text" name="project_name" size="20"/><br /> </td><br /> <td><br /> <input type="text" name="project_address" size="20"/><br /> </td><br /> <td><br /> <input type="hidden" name="item_id"/><br /> <input type="text" name="item_name" size="15"/><br /> </td><br /> <td><br /> <input type="text" name="report_count" size="3"/><br /> </td><br /> <td><br /> <input type="text" name="price" size="5"/><br /> </td><br /> <td><br /> <input type="text" name="amount" size="5"/><br /> </td><br /> <td><br /> <input type="text" name="ought_fare" size="5"/><br /> </td><br /> </tr><br /> </table><br /> </body><br /></html><br />
//ajax請求相關java code：<br /> public String getConsigJSON(String reportNum, String id) throws Exception {<br />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 + "'";<br />StringBuffer json = new StringBuffer("[");<br />try {<br />stmt = conn.createStatement();<br />rs = stmt.executeQuery(sql);<br />ResultSetMetaData rsmd = rs.getMetaData();<br />RowSetDynaClass rsdc = new RowSetDynaClass(rs);<br />List list = rsdc.getRows();<br />/*if ("".equals(id)) {<br />String validValue = isValid(reportNum);<br />json.append("{valid:").append(validValue).append("},");<br />String existsValue = this.isExists(reportNum);<br />json.append("{exists:").append(existsValue).append("}");<br />} else {*/<br />String num = getReportNum(id);<br />if (num.equals(reportNum)) {<br />json.append("{valid:true},");<br />json.append("{exists:false}");<br />} else {<br />String validValue = isValid(reportNum);<br />json.append("{valid:").append(validValue).append("},");<br />String existsValue = this.isExists(reportNum);<br />json.append("{exists:").append(existsValue).append("}");<br />}<br />//}<br />for (int j = 0, len = list.size(); j < len; j++) {<br />json.append(",{");<br />DynaBean dyna = (DynaBean) list.get(j);<br />for (int i = 1; i <= rsmd.getColumnCount(); i++) {<br />if (i == rsmd.getColumnCount()) {<br />json.append(rsmd.getColumnName(i)).append(":/"")<br />.append(FunctionStatic.getNullString(BeanUtils.getSimpleProperty(dyna, rsmd.getColumnName(i).toLowerCase())))<br />.append("/"");<br />} else {<br />json.append(rsmd.getColumnName(i)).append(":/"")<br />.append(FunctionStatic.getNullString(BeanUtils.getSimpleProperty(dyna, rsmd.getColumnName(i).toLowerCase())))<br />.append("/",");<br />}<br />}<br />json.append("}");<br />/*if (j < len - 1) {<br />json.append(",");<br />}*/<br />}<br />json.append("]");<br />} catch (Exception e) {<br />e.printStackTrace();<br />throw e;<br />}<br />return json.toString();<br />}</p><p> public String isValid(String reportNum) throws Exception {<br />String bool = "";<br />try {<br />prepar = conn.prepareStatement("select count(*) from MM_Consign where report_num = '" + reportNum + "'");<br />rs = prepar.executeQuery();<br />int count = rs.next() ? rs.getInt(1) : 0;<br />bool = count > 0 ? "true" : "false";<br />} catch (Exception e) {<br />e.printStackTrace();<br />throw e;<br />}<br />return bool;<br />}</p><p> public String isExists(String reportNum) throws Exception {<br />String bool = "";<br />try {<br />prepar = conn.prepareStatement("select count(*) from MM_ReportTransfer where report_num = '" + reportNum + "'");<br />rs = prepar.executeQuery();<br />int count = rs.next() ? rs.getInt(1) : 0;<br />bool = count > 0 ? "true" : "false";<br />} catch (Exception e) {<br />e.printStackTrace();<br />throw e;<br />}<br />return bool;<br />}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
