JS implements dynamic generation of tables and submits table data to the backend_javascript skills

The example in this article introduces the relevant code of JS to dynamically generate tables and submit table data to the backend. It is shared with everyone for your reference. The specific content is as follows

Let’s first look at the requirements: dynamically generate a table on the web page, edit the data in the table, and then submit the data in the table to the back-end server for storage.

Then the first thing we need to solve is the problem of dynamically generating tables

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. Then create a blank table in the page div in advance, which can be determined according to your needs. Here is a table with a header

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

3. After the table is created, we can write the key code for dynamically generating the table. We 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+')">删除</a>'
           +'<a id="edit'+num+'" class="edit" style="cursor: pointer; color: blue;" onclick="editDataByOne('+num+')">修改</a>'
           +'<a id="save'+num+'" class="hide" style="cursor: pointer; color: blue;" onclick="saveByOne('+num+')">保存</a>'
         +'</td>'
         +'</tr>';
    
    var elements = $("#myTable").children().length;  //表示id为“mtTable”的标签下的子标签的个数
    
    $("#myTable").children().eq(elements - 1).after(tableHtml); //在表头之后添加空白行
    num++;   
  }

We can see that we added the tag in the tag, which is mainly used to provide user input parameters, and the global variable num is mainly used to distinguish the id of each added parameter. Existing due to uniqueness.

4. Next we operate the table

//删除行
function removeTr(trNum){
  $("#tr"+trNum).remove();
}
//编辑行
function editDataByOne(trNum){
  $this = $("#tr"+trNum);
  $(".addtd",$this).removeAttr("readonly");
}
//保存行
function saveByOne(trNum){
  $this = $("#tr"+trNum);
  $(".addtd",$this).attr("readonly","readonly");
}

We have deleted, edited, saved and other operations on the table above. The specific operation content can be adjusted according to needs. (In fact, I later discovered that I don’t need the global num, and can also implement the operation of adding rows. As for how to implement it, it is mainly some js operations. I will study it when I have time)

At this point, our page code for dynamically generating tables is complete.
In the first half of the article, we talked about how to dynamically generate a table. Next, we will talk abouthow to obtain multiple pieces of data in the table and submit it to the backend server.

Before development, I also looked for some information on the Internet. They were either too concise or incomprehensible, but most of them mentioned using Json to pass multiple parameters into the background, so I wrote based on this idea. Got the following code.

1. First, let’s take a look at how to obtain the data in the table, or combine it with the example above

<div>
  <form id="submitForm">
    <table border="0" style="text-align: center;" width="100%" id="myTable">
      <tr>
        <td width="150px;">表头1</td>
        <td width="150px;">表头2</td>
        <td width="120px;">表头3</td>
        <td width="120px;">表头4</td>
        <td width="80px;">表头5</td>
        <td width="100px;">操作</td>
      </tr>
    </table>
   </form>
   <input type="button" value="添加" onclick="addTable();">
   <input type="button" value="提交" onclick="save();">
 </div>

We can see that we have added a form tag outside the Table tag and set the id of the form tag.

2. Next, we obtain the parameters of the input tag in the form according to jQuery's "serialize()" method

var msg = $("#submitForm").serialize();  //获得后的msg的值：canshu1=xxx&canshu2=xxx&canshu3=xxx&canshu4=xxx&canshu5=xxx

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

var json = "[{";
var msg2 = msg.split("&");   //先以“&”符号进行分割，得到一个key=value形式的数组
var t = false;
for(var i = 0; i<msg2.length; i++){
  var msg3 = msg2[i].split("=");  //再以“=”进行分割，得到key，value形式的数组
  for(var j = 0; j<msg3.length; j++){
    json+="\""+msg3[j]+"\"";
    if(j+1 != msg3.length){
      json+=":";
    }
    if(t){
      json+="}";
      if(i+1 != msg2.length){  //表示是否到了当前行的最后一列
        json+=",{";
      }
      t=false;
    }
    if(msg3[j] == "canshu5"){  //这里的“canshu5”是你的表格的最后一列的input标签的name值，表示是否到了当前行的最后一个input
      t = true;
    }
  }
  if(!msg2[i].match("canshu5")){  //同上
    json+=";";
  }
          
}
json+="]";
//最终msg的值就被转换为：[{"key":"value"；"key":"value"},{"key":"value"；"key":"value"}]格式的json数据<br />

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

At this point, we have finished writing the code to obtain multiple pieces of data in the form and submit it to the server. We hope it will be helpful to everyone's learning.