JQuery uses Ajax to double-click a Table to make the Table editable and save it to the database.

JQuery uses Ajax to double-click a Table to make the Table editable and save it to the database.

Recently, when you are working on a project, you need to double-click the TR of the Table to make the Table row editable to modify the data and save the data to the database. You don't need to talk about it. paste the Code directly. I hope you can get my comments.

1 function tdEdit (element, id) {2 var I _a = "<input class = 'edit _ td 'type = 'text' style = 'height: 30px; width: 40px; 'value = '"; 3 var I _ B ="'/> "; 4 var t_a = "<textarea class = 'tarea 'cols = '63' rows = '3' style = 'width: 90%'> "; 5 var t_ B = "</textarea>"; 6 var td = $ (element ). find ("td"); 7 if (td. length> 0) {8 var SC = $ (element ). children (). eq (1 ). text (); 9 var ss =$ (element ). children (). eq (2 ). text (); 10 Var sequence = $ (element ). children (). eq (3 ). text (); 11 var weight = $ (element ). children (). eq (4 ). text (); 12 var max = $ (element ). children (). eq (5 ). text (); 13 var min = $ (element ). children (). eq (6 ). text (); 14 var cv = $ (element ). children (). eq (7 ). text (); 15 var explain = $ (element ). children (). eq (8 ). text (); 16 17 ((element).children().eq(1).html ($ (t_a + SC + t_ B); 18 ((element).children().eq(2).html ($ (t _ A + ss + t_ B); 19 values (element).children().eq(32.16.html ($ (I _a + sequence + "'id = 'num1" + I _ B )); 20 certificate (element).children().eq(42.16.html ($ (I _a + weight + "'id = 'num2" + I _ B )); 21 certificate (element).children().eq(5).html ($ (I _a + max + "'id = 'maxvalue" + I _ B )); 22 bytes ($ (I _a + min + "'id = 'minvalue" + I _ B); 23 bytes (element).children().eq(72.16.html ($ (t_a + cv + t_ B); 24 $ (element ). children (). eq (82.16.html ($ (t_a + explain + t_ B); 25} 26 $ (". edit_td "). click (function () {27 return false; 28}); 29 $ (". tarea "). click (function () {30 return false; 31}); 32 // get focus 33 $ (". edit_td "). trigger ("focus"); 34 $ (". tarea "). trigger ("focus"); 35 36 // after the text box loses focus, submit the content and change it to text 37 $ (". save "). click (function () {38 // verification information "n":/^ \ d + $/39 var reg =/^ [0-9] + \. {0, 1} [0-9] {0, 2} $/; 40 var num1 = $ ("# num1 "). val (); 41 var Num2 = $ ("# num2 "). val (); 42 var max =$ ("# maxvalue "). val (); 43 var min = $ ("# minvalue "). val (); 44 if (parseInt (min)> parseInt (max) {45 alert ("the minimum value cannot be greater than the maximum value! "); 46 return false; 47} 48 if (! Reg. test (num1) |! Reg. test (num2) |! Reg. test (max) |! Reg. test (min) {49 alert ("enter a number! "); 50 return false; 51} 52 // new value 53 $ (". edit_td "). each (function (I) {54 var newtxt = $ (this ). val (); 55 $ (element ). children (). eq (I + 32.16.html (newtxt); 56}); 57 $ (". tarea "). each (function (j) {58 var newtarea = $ (this ). val (); 59 if (j <2) {60 $ (element ). children (). eq (j + 12.16.html (newtarea); 61} 62 else {63 $ (element ). children (). eq (j + 52.16.html (newtarea); 64} 65}); 66 67 var new_ SC = $ (eleme Nt ). children (). eq (1 ). text (); 68 var new_ss =$ (element ). children (). eq (2 ). text (); 69 var new_sequence = $ (element ). children (). eq (3 ). text (); 70 var new_weight = $ (element ). children (). eq (4 ). text (); 71 var new_max = $ (element ). children (). eq (5 ). text (); 72 var new_min = $ (element ). children (). eq (6 ). text (); 73 var new_cv = $ (element ). children (). eq (7 ). text (); 74 var new_explain = $ (element ). children (). eq (8 ). Text (); 75 if (new_ SC! = SC | new_ss! = Ss | new_sequence! = Sequence | new_weight! = Weight | new_max! = Max | new_min! = Min | new_cv! = Cv | new_explain! = Explain) {76 $. ajax ({77 type: 'post', 78 contentType: 'application/json', 79 url: '/Ajax/AjaxAction. ashx/UpdateRuleDetail ', 80 data:' {id: "'+ id +'", strCon: "'+ new_ SC +'", strStandard: "'+ new_ss + '", sequence: "'+ new_sequence +'", Weight: "'+ new_weight +'", CandidateValue: "'81 + new_cv + '", MaxValue: "'+ new_max +'", MinValue: "'+ new_min +'", Explain: "'+ new_explain +'"} ', 82 dataType: 'Json', 83 async: true, 84 beforeSend: function () {85}, 86 success: function (data) {87 alert ("saved successfully! "); 88 window. location. reload (); // refresh page 89}, 90 error: function (XMLHttpRequest, textStatus, errorThrown) {91 alert (XMLHttpRequest + ':' + textStatus); 92 window. location. reload (); 93} 94}); 95} 96 else {97 alert ("Tip: You have not made any changes! "); 98 window. location. reload (); 99} 100 101}); 102}JS

Front-end page binding:

1 <tr ondblclick = "tdEdit (this, @ item. ID)"> </tr>Html

Finally:

How does javascript implement double-click table td for editing and save it to the database?

To enter text on the webpage, the text box is supported. Therefore, to achieve the perfect effect, we suggest adding two elements to td:
<Span> </span>
<Input type = "text">
Double-click event dblclick bound to td using jquery. Event Effect: Assign the text of span to the value of input, hide span, and display input
Use jquery to bind the focus of input to the loss event blur. Event Effect: Assign the input value to the text of span, hide the input, and display the span
Note: During table initialization, span is displayed, input is hidden, and text in span is the same as input value.

Jquery double-click event, double-click table to edit

$ (Table object). dbclick (function (){
Obtain the location and size of the editing area.
Obtains the current value of the edited text.

Create an input element
Overwrite the position and size of the input element to the top of the editing area and obtain the focus.
$ (This input element). blur (function (){
Modify the text in the editing area
Delete this input element
});
});