You can interact with the background and make Ajax requests using the values in the first column. Assign values to the following cells. You can add a row on the keyboard, delete a row of tables, and quickly move to the focus operation. And Keyboard Events to verify numbers. </P> <p> <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en"> <br/> <HTML> <br/> <pead> <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-C Olor: # 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 H Tmltemplate = '<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> <I Nput 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> // Add a table record for a row <br/> function addrowel (textinput, currentel) {<br/> // textinput = $ (this ), jquery will automatically input the trigger An object that sends the current event, that is, 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 (on Loadreportinfo ). keyup (oninputkeyup); <br/> template. find (": Text [name = 'report _ num']"). focus (). focusin (); <br/> addclass (); <br/>}</P> <p> // when the focus is lost, add a TR row record <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 (User Name. substring (0, 1) + new date (). getyear (); <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/>}</P> <p> // check whether the field value is null, if not empty, you can add a row <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/> 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 Global <br/>}</P> <p> // obtain the index of the current cursor <br/> function getfocusindex (arytr, currentel) {<br/> var I = 0; <br/> var J =-1; <br/> $ (arytr ). each (function () {// obtain the current element index <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, ''); // verify the integer <br/>} else if (currentel. ATTR ("name") = "price" | currentel. ATTR ("name") = "ought_fare") {<br/> var val = Currentel. Val (); // verify the decimal number <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/> 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) {// press enter and enter <br/> nexttd. find (": Text "). focus (). focusin (); // obtain the focus of the next text field <br/> addrowel (undefined, currentel ); // Add a row <br/>} else if (currkeycode = 45) {// Insert key, add a row <br/> addrowel (undefined, currentel ); <br/>} else if (currkeycode = 46) {// delete key, delete a row <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 key, next and right <br/> // call the Ajax method and set the delegate information if it is a report number text field <br/> onloadreportinfo (undefined, currentel ); <br/> nexttd. find (": Text "). focus (). focusin (); <br/>} else if (currkeycode = 38) {// up key, on <br/> onloadreportinfo (undefined, currentel ); <br/> // obtain the current element index <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 key, next <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 key, left and front <br/> onloadreportinfo (undefined, currentel); <br/> prevtd. find (": Text "). focus (). focusin (); <br/>}</P> <p> // load delegate Information Based on report numbers <br/> function onloadreportinfo (textinput, currentel) {<br/> var El = currentel = undefined? $ (This): currentel; <br/> If (El. ATTR ("name") = "report_num") {<br/> getreportinfo (EL ); <br/>}</P> <p> // Ajax request to obtain the delegate information by using the report number <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 ("this number has been applied. Are you sure you want to apply again! "); <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 ("no information for this number found! "); <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/> 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 ("this number has been applied. Are you sure you want to apply again! "); <Br/> reportnum. ATTR ("flag", "exist"); <br/>}< br/> }); <br/>}</P> <p >$ (function () {<br/> addclass (); <br/> // Add focus and Event Focus events for all text fields in 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/> </pead> </P> <p> <body bgcolor = "# ffffff"> <br/> <font color = "red" style = "font-size: 12px; "> Note: * The Marked list is mandatory. Insert a row into the insert Statement (* When the marked data is complete) and delete the current row (a row of records cannot be deleted) </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 "> Report No. </span> <br/> <font color =" red "> * </font> <br/> </TD> <br/> <TD align = "center"> <br/> <span style = "color: # ffffff "> Contract No. </span> <br/> </TD> <br/> <TD align =" center "> <br/> <span style =" color: # ffffff "> delegate id </span> <br/> </TD> <br/> <TD align =" center "> <br/> <span style =" color: # ffffff "> entrusting Organization </span> <br/> </TD> <br/> <TD align =" center "> <br/> <span style =" color: # ffffff "> project name </span> <br/> </TD> <br/> <TD align =" center "> <br/> <span style =" color: # ffffff "> Project location </span> <br/> </TD> <br/> <TD align =" center "> <br/> <span style =" color: # ffffff "> check items </span> <br/> </TD> <br/> <TD align =" center "> <br/> <span style =" color: # ffffff "> quantity </span> <br/> </TD> <br/> <TD align =" center "> <br/> <span style =" color: # ffffff "> unit price </span> <br/> </TD> <br/> <TD align =" center "> <br/> <span style =" color: # ffffff "> quantity </span> <br/> </TD> <br/> <TD align =" center "> <br/> <span style =" color: # ffffff "> total price </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/> <input type =" text "name =" contract_num "size =" 15 "/> <br/> </TD> <br/> <input type =" text "name =" wt_num "size =" 15" /> <br/> </TD> <br/> <input type = "text" name = "wt_company" size = "20"/> <br/> </TD> <br/> <input type = "text" name = "project_name" size = "20"/> <br /> </TD> <br/> <input type = "text" name = "project_address" size = "20"/> <br/> </TD> <br/> <input type = "hidden" name = "item_id"/> <br/> <input type = "text" name = "item_name" size = "15"/> <br/> </TD> <br/> <input type = "text" name = "report_count" size = "3"/> <br/> </TD> <br/> <input type = "text" name = "Price "size =" 5 "/> <br/> </TD> <br/> <input type =" text "name =" amount "Size = "5"/> <br/> </TD> <br/> <input type = "text" name = "ought_fare" size =" 5 "/> <br/> </TD> <br/> </tr> <br/> </table> <br/> </body> <br/> </ptml> <br/>
// Java code related to Ajax requests: <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.exe cutequery (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/> St Ring 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 exis Tsvalue = 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 LS-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 (LS-DYNA, rsmd. getcolumnname (I ). tolowercase () <br/>. append ("/" "); <br/>} else {<br/> JSON. append (rsmd. getcolumnname (I )). append (":/" ") <br/>. append (functionstatic. getnullstring (beanutils. getsimpleproperty (LS-DYNA, rsmd. getcolumnname (I ). tolowercase () <br/>. append ("/", "); <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.exe cuteq Uery (); <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.exe cutequery (); <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
