JQurey code:
1. <script type = "text/javascript">
2. var flag = 0;
3.
4. // Add a new row
5. function addRow (){
6. var nrow = "<tr> <td> <input name = 'hideid' type = 'den den 'value =''/> <input name = 'username' type = 'text' value = ''size = '15' maxlength = '15'/> </td> <select name = 'seltype' id = seltype1> <option value = 'text '> text box </option> <option value = 'textarea'> multi-row partition </option> <option value = 'select'> drop-down box </option> <option value =' radio '> single choice </option> <option value = 'checkbox'> check box </option> </select> </td> <span class = 'heb' name = 'buttonspan '> <input value =' add 'onclick = 'adddata (this) 'Type = 'button 'class = 'se _ buton '/> & nbsp; <input value = 'cancel' type = 'button 'onclick = 'deleteewrow (this) 'class = 'se _ buton '/> </span> </td> </tr> ";
7. if (flag = 0 ){
8. $ ('# attributetable'). append (nrow );
9. flag = 1;
10 .}
11 .}
12.
13. // Add data from the new row to the background
14. function addData (obj ){
15.
16.
17. var trobj = $ (obj). parents ('tr ');
18. var username = $ (trobj). find (': text [name = username]'). val ();
19. var seltype = $ (trobj). find ('select [name = seltype] '). val ();
20.
21. $. post ("SupplyAJAX. aspx", {username: username, seltype: seltype, type: "add"}, function (data ){
22. if (data. toString ()! = "0 "){
23. $ (trobj). find (': hidden [name = hideid]'). val (data. toString ());
24. changeDisable (obj, 0 );
25 .}
26. else {
27. deleteNewRow (obj );
28. alert ('add failed ');
29 .}
30 .});
31. flag = 0;
32 .}
33.
34. // update the row
35. function updData (obj ){
36.
37.
38. var trobj = $ (obj). parents ('tr ');
39. var id = $ (trobj). find (': hidden [name = hideid]'). val ();
40. var username = $ (trobj). find (': text [name = usrname]'). val ();
41.
42. var seltype = $ (trobj). find ('select [name = seltype] '). val ();
43. $. post ("SupplyAJAX. aspx", {id: id, username: username, seltype: seltype, type: "update "},
44. function (data ){
45.
46. if (data. toString ()! = "0 "){
47. changeDisable (obj, 0 );
48 .}
49. else {
50. alert ('Update failed ');
51 .}
52 .});
53 .}
54. // delete a new row
55. function deleteNewRow (obj ){
56. $ (obj). parents ('tr '). replaceWith ('');
57. flag = 0;
58 .}
59. // Delete the row in the database
60. function deleteRow (obj ){
61. var trobj = $ (obj). parents ('tr ');
62. var id = $ (trobj). find (': hidden [name = hideid]'). val ();
63. $. post ("SupplyAJAX. aspx", {id: id, type: "delete "},
64. function (data ){
65. if (data. toString ()! = "0 "){
66. $ (obj). parents ('tr '). replaceWith ('');
67 .}
68. else {
69. alert ('deletion failed ');
70 .}
71 .});
72 .}
73.
74. // change the editing status
75. function changeDisable (obj, type ){
76. var trobj = $ (obj). parents ('tr ');
77. if (type = 0 ){
78. $ (trobj). find (': text'). attr ('Disabled', 'Disabled ');
79. $ (trobj). find ('select'). attr ('Disabled ', 'Disabled ');
80. upload (trobj0000.find('span?name=buttonspan='0000.html ("<input name = 'gx 'value = 'update' type = 'button 'onclick = 'changedisable (this, 1) 'class = 'se _ buton '/> & nbsp; <input value = 'delete' type = 'button 'name = 'qx' onclick = 'deleterow (this) 'class = 'se _ buton '/> ");
81 .}
82. if (type = 1 ){
83. $ (trobj). find (': text'). attr ('Disabled ','');
84. $ (trobj). find ('select'). attr ('Disabled ','');
85. upload (trobj).find('span?name=buttonspan='hangzhou.html ("<input name = 'gx 'value =' type = 'button 'onclick = 'upddata (this) 'class = 'se _ buton'/> & nbsp; <input value = 'delete' type = 'button 'name = 'qx' onclick = 'changedisable (this, 0) 'class = 'se _ buton'/> ");
86 .}
87 .}
88. </script>
HTML code:
1. <body>
2.
3. <table id = "attributetable">
4. </table>
5. <div class = "heb"> <input value = "add a line" type = "button" onclick = 'addrow () 'class = "se_buton"/> </div>
6. </body>
SupplyAJAX class
1.
2. public partial class SupplyAJAX: System. Web. UI. Page
3 .{
4. static List <UserModel> UmList = new List <UserModel> ();
5.
6. protected void Page_Load (object sender, EventArgs e)
7 .{
8. switch (Request. QueryString ["type"])
9 .{
10. case "add ":
11. Add ();
12. break;
13. case "update ":
14. Update ();
15. break;
16. case "delete ":
17. Delete ();
18. break;
19 .}
20. Response. End ();
21 .}
22.
23. private string Add ()
24 .{
25. UserModel um = new UserModel ();
26. um. Id = UmList. Count + 1; // automatically add 1 to ID
27. um. Username = Request. Form ["username"];
28. um. Seltype = Request. Form ["seltype"];
29. UmList. Add (um );
30. return um. Id. ToString ();
31 .}
32.
33. private string Update ()
34 .{
35. int id = int. Parse (Request. QueryString ["id"]);
36. for (int I = 0; I <UmList. Count; I ++)
37 .{
38. if (id = UmList [I]. Id)
39 .{
40. UmList [I]. Username = Request. Form ["username"];
41. UmList [I]. Seltype = Request. Form ["seltype"];
42. return UmList [I]. Id. ToString ();
43 .}
44 .}
45. return "0 ";
46 .}
47.
48. private string Delete ()
49 .{
50. int id = int. Parse (Request. Form ["id"]);
51. for (int I = 0; I <UmList. Count; I ++)
52 .{
53. if (id = UmList [I]. Id)
54 .{
55. UmList. Remove (UmList [I]);
56. return UmList [I]. Id. ToString ();
57 .}
58 .}
59. return "0 ";
60 .}
61.
62 .}
This article is from the "Sharing Experience" blog
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
