JS dynamically generates tables and submits table data to the backend. js backend

JS dynamically generates tables and submits table data to the backend. js backend

This article introduces the code for dynamically generating tables in JS and submitting table data to the backend. The details are as follows:

First, let's take a look at the requirement: dynamically generate a table on the web page, edit the data in the table, and submit the data in the table to the backend server for storage.

First, we need to solve the problem of dynamic Table Generation.

1. First, we need to import the JS library file.

<script src="../js/jqui/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>

2. Create a blank table in the div of the page. You can set it as needed. Here is a table with a table header.

<Table border = "0" style = "text-align: center;" width = "100%" id = "myTable"> <tr> <td width = "150px; "> header 1 </td> <td width =" 150px; "> header 2 </td> <td width =" 150px; "> header 3 </td> <td width =" 150px; "> header 4 </td> <td width =" 150px; "> header 5 </td> <td width =" 150px; "> operation </td> </tr> </table>

3. After creating a table, we can write key code for dynamically generating the table. Let's write a js method for triggering.

Var num = 0; function addTable () {var tableHtml = ""; tableHtml + = '<tr id = "tr' + num + '">' + '<td> <input class = "addtd" id = "cnashu1' + num + '" style = "width: 150px; "type =" text "name =" cnashu1 "/> </td> '+' <td> <input class =" addtd "id =" cnashu2 '+ num + '" style = "width: 150px; "type =" text "name =" cnashu2 "/> </td> '+' <td> <input class =" addtd "id =" cnashu3 '+ num + '" style = "width: 150px; "type =" text "name =" cnashu3 "/> </td> '+' <td> <input class =" addtd "id =" cnashu4 '+ num + '" style = "width: 150px; "type =" text "name =" cnashu4 "/> </td> '+' <td> <input class =" addtd "id =" cnashu5 '+ num + '" style = "width: 150px; "type =" text "name =" cnashu5 "/> </td> '+' <td> <a style =" cursor: pointer; color: blue; "onclick =" removeTr ('+ num + ') "> Delete </a> '+' <a id =" edit' + num + '"class =" edit "style =" cursor: pointer; color: blue; "onclick =" editDataByOne ('+ num + ') "> modify </a> '+' <a id =" save '+ num +' "class =" hide "style =" cursor: pointer; color: blue; "onclick =" saveByOne ('+ num +') "> Save </a> '+' </td> '+' </tr> '; var elements = $ ("# myTable "). children (). length; // indicates the number of sub-tags under the tag id "mtTable" $ ("# myTable "). children (). eq (elements-1 ). after (tableHtml); // Add a blank row num ++ after the header ;}

We can see that the <input> label is added to the <tb> label, which is mainly used to provide user input parameters, while the global variable num, it is mainly used to differentiate the uniqueness of each added parameter id.

4. Next we will operate the table.

// Delete row function removeTr (trNum) {$ ("# tr" + trNum ). remove ();} // edit row function editDataByOne (trNum) {$ this = $ ("# tr" + trNum); $ (". addtd ", $ this ). removeAttr ("readonly");} // Save the row function saveByOne (trNum) {$ this = $ ("# tr" + trNum); $ (". addtd ", $ this ). attr ("readonly", "readonly ");}

The table is deleted, edited, and saved. The specific operation content can be adjusted as needed. (In fact, I found that you can add rows without the need for a global num operation. As for how to implement this operation, we mainly need to perform some js operations. If you have time, study it again)

So far, the page code of the dynamic table generation is complete.
In the first part, we talked aboutHow to dynamically generate a tableNext, let's talk aboutHow to obtain multiple data entries in the table and submit the data to the backend server.

Before development, I also found some information on the Internet, either too concise or hard to understand, but most of them mentioned the use of Json to pass multiple parameters to the background, then I wrote the following code based on this idea.

1. First, let's take a look at how to obtain the data in the table.

<Div> <form id = "submitForm"> <table border = "0" style = "text-align: center; "width =" 100% "id =" myTable "> <tr> <td width =" 150px; "> header 1 </td> <td width =" 150px; "> header 2 </td> <td width =" 120px; "> header 3 </td> <td width =" 120px; "> header 4 </td> <td width =" 80px; "> header 5 </td> <td width =" 100px; "> operation </td> </tr> </table> </form> <input type =" button "value =" add "onclick =" addTable (); "> <input type =" button "value =" Submit "onclick =" save (); "> </div>

We can see that a form label is added to the outer layer of the Table label and the id of the form label is set.

2. Next we will obtain the input tag parameters in the table based on jQuery's "serialize ()" method.

Var msg = $ ("# submitForm "). serialize (); // The value of the obtained msg: canshu1 = xxx & canshu2 = xxx & canshu3 = xxx & canshu4 = xxx & canshu5 = xxx

3. After obtaining the data in the table, we convert the data into json format according to its value form.

Var json = "[{"; var msg2 = msg. split ("&"); // splits the string with the "&" symbol first to obtain an array var t = false in the form of key = value; for (var I = 0; I <msg2.length; I ++) {var msg3 = msg2 [I]. split ("="); // separate it with "=" to obtain an array in the form of key and value (var j = 0; j <msg3.length; j ++) {json + = "\" "+ msg3 [j] +" \ ""; if (j + 1! = Msg3.length) {json + = ":";} if (t) {json + = "}"; if (I + 1! = Msg2.length) {// indicates whether the last column of the current row is in json + = ", {" ;}t = false ;} if (msg3 [j] = "canshu5") {// here "canshu5" is the name value of the input label in the last column of your table, indicates whether the last input t of the current row is true;} if (! Msg2 [I]. match ("canshu5") {// same as json + = ";" ;}} json + = "]"; // The final msg value is converted: [{"key": "value"; "key": "value" },{ "key": "value"; "key ": "value"}] format json data

Through the above Code, we have successfully converted multiple pieces of data in the table into json format, then we can send Json data to the background for processing through ajax.

At this point, we have obtained multiple pieces of data from the table and submitted the code to the server. I hope this will be helpful for your learning.

Articles you may be interested in:

• Automatically generate a table using js + xml
• A function implemented by js to automatically generate a table based on the Content
• Use a button to trigger Javascript code to dynamically generate a table
• JQuery submits data to Webservice in combination with Json, and receives Json data returned from Webservice.
• Js dynamically generates a table with the specified number of rows
• Php jq jquery getJSON
• Js uses arrays to determine whether the same data exists in the submitted data
• Js generates a dynamic table and adds a click event Method for each cell
• JQuery submits data in JSON format to the Server Sample Code
• How JS controls the dynamic generation of any row/column number table on a webpage