JS implementation dynamically generate tables and submit tabular data to JSON in the back-end table

Original address

Requirements: Dynamically generate a table on a Web page and edit the data in the table, and then submit the data in the table to the backend server for saving.

The table is dynamically generated first.

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

2. Then create a blank table in the page div in advance, depending on the requirements, I am here a table with a header

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

3. Once the form is created, we can write the key code that dynamically generates the table. We write a JS method for triggering using

var num = 0;    function addtable () {var tablehtml = ""; tablehtml + = ' <tr id= ' tr ' +num+ ' > ' + ' <td><input class= ' addtd ' id= ' cnashu1 ' +num+ ' "style=" width:150p x; "type=" text "name=" cnashu1 "/></td> ' + ' <td><input class=" addtd "id=" Cnashu2 ' +num+ ' "style=" wi dth:150px; "type=" text "name=" cnashu2 "/></td> ' + ' <td><input class=" addtd "id=" Cnashu3 ' +num+ ' "St Yle= "width:150px;" type= "text" name= "Cnashu3"/></td> ' + ' <td><input class= "addtd" id= "Cnashu4" +nu m+ ' "style=" width:150px; "type=" text "name=" Cnashu4 "/></td> ' + ' <td><input class=" addtd "id=" CNAs Hu5 ' +num+ ' "style=" width:150px; "type=" text "name=" Cnashu5 "/></td> ' + ' <td><a style=" Cursor:poin ter 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; Represents the number of child labels under the label with the ID "mttable" ("#myTable"). Children (). EQ (elements-1). After (tablehtml);     Add blank line num++ after table header; }

We can see that in the <tb> tab we have added <input> tags, which are mainly used to provide user input parameters, while the global variable num, which is mainly used to differentiate the ID of each added parameter exists.

4. Next we work on the table

Delete Row function Removetr (trnum) {  $ ("#tr" +trnum). Remove (); Edit Line function Editdatabyone (trnum) {  $this = $ ("#tr" +trnum);  $ (". Addtd", $this). Removeattr ("ReadOnly");} Save Line function Savebyone (trnum) {  $this = $ ("#tr" +trnum);  $ (". Addtd", $this). attr ("ReadOnly", "ReadOnly");}

　　

We have deleted the table, edit, save and so on, the specific operation content can be adjusted according to the needs. (In fact, I found that I can not need global num, can also implement the operation of adding rows, as to how to achieve, mainly some JS operation, have time to study it)

At this point, the page code of our dynamically generated table is finished.
In the first half we talked about how to dynamically generate a table , and then we'll talk about how to get multiple data in the table and submit it to the backend server .

Before the development I also found some information on the Internet, either too concise, or do not understand, but most of them mentioned the use of JSON to the way to pass multiple parameters into the background, then I wrote the following code according to this idea.

1. First, let's look at how to get the data in the table, or combine the example above

<div>  <form id= "SubmitForm" >    <table border= "0" style= "text-align:center;" width= "100%" id= " MyTable ">      <tr>        <td width=" 150px; " > Head 1</td>        <td width= "150px;" > Head 2</td>        <td width= "120px;" > Head 3</td>        <td width= "120px;" > Head 4</td>        <td width= "80px;" > Head 5</td>        <td width= "100px;" > Operations </td>      </tr>    </table>   </form>   <input type= "button" value= "Add" Onclick= "addtable ();" >   <input type= "button" value= "Submit" onclick= "Save ();" > </div>

2. Next we get the parameters of the input tag in the table based on jquery's "Serialize ()" method

var msg = $ ("#submitForm"). Serialize ();  The value of the MSG after getting: canshu1=xxx&canshu2=xxx&canshu3=xxx&canshu4=xxx&canshu5=xx

3. After getting the data in the table, we convert it to JSON-formatted data in the form of its value.

var json = "[{"; var msg2 = Msg.split ("&");   The "&" symbol is first segmented to get an array of key=value form var t = false;for (var i = 0; i<msg2.length; i++) {  var msg3 = msg2[i].split ("=" );  The "=" is then segmented to get the array for key,value form  (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        json+= ", {";      }      T=false;    }    if (msg3[j] = = "Canshu5") {  //here the "Canshu5" is the name value of the input tag of the last column of your table, indicating whether the last input t = True of the current line      ;    }  }  if (!msg2[i].match ("Canshu5")) {  //Ibid.    json+= ";"  }          } json+= "]";

With the above code, we have successfully converted multiple data in a table into JSON-formatted data, so we can send the JSON data to the background processing in an AJAX way.

JS implementation dynamically generate tables and submit tabular data to JSON in the back-end table