JS implémente la génération dynamique de tables et soumet les données des tables aux compétences backend_javascript

L'exemple de cet article présente le code JS pertinent pour générer dynamiquement des tables et soumettre les données des tables au backend. Il est partagé avec tout le monde pour votre référence. Le contenu spécifique est le suivant

.

Examinons d'abord les exigences : générer dynamiquement un tableau sur la page Web, modifier les données du tableau, puis soumettre les données du tableau au serveur principal pour stockage.

Ensuite, la première chose que nous devons résoudre est le problème de la génération dynamique de tables

1. Nous devons d’abord importer le fichier de la bibliothèque JS.

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

2. Créez ensuite un tableau vierge dans la page div à l'avance, qui peut être déterminé selon vos besoins. Voici un tableau avec un en-tête

.

<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. Une fois la table créée, nous pouvons écrire le code clé pour générer dynamiquement la table. Nous écrivons une méthode js pour le déclenchement

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++;   
  }

Nous pouvons voir que nous avons ajouté la balise d5fd7aea971a85678ba271703566ebfd dans la balise 2e852944b30bc18a48842a9c5108cba8, qui est principalement utilisée pour fournir les paramètres d'entrée de l'utilisateur, et la variable globale num est principalement utilisée pour distinguer l'identifiant de chaque paramètre ajouté. Exister en raison de son caractère unique.

4. Ensuite, nous faisons fonctionner la 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");
}

Nous avons supprimé, modifié, enregistré et autres opérations dans le tableau ci-dessus. Le contenu spécifique de l'opération peut être ajusté en fonction des besoins. (En fait, j'ai découvert plus tard que je n'avais pas besoin du numéro global et que je pouvais également implémenter l'opération d'ajout de lignes. Quant à la façon de l'implémenter, il s'agit principalement de certaines opérations js. Je l'étudierai quand j'aurai le temps)

À ce stade, notre code de page pour générer dynamiquement des tableaux est terminé.
Dans la première moitié de l'article, nous avons parlé de comment générer dynamiquement une table Ensuite, nous parlerons decomment obtenir plusieurs éléments de données dans. la table et soumettez-la au serveur backend.

Avant le développement, j'ai également trouvé des informations sur Internet. Elles étaient soit trop concises, soit incompréhensibles, mais la plupart d'entre elles mentionnaient l'utilisation de Json pour passer plusieurs paramètres en arrière-plan, j'ai donc écrit sur la base de cette idée. .

1. Voyons d’abord comment obtenir les données du tableau, ou les combiner avec l’exemple ci-dessus

<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>

Nous pouvons voir que nous avons ajouté une balise form en dehors de la balise Table et défini l'identifiant de la balise form.

2. Ensuite, nous obtenons les paramètres de la balise d'entrée sous le formulaire selon la méthode "serialize()" de jQuery

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

3. Après avoir obtenu les données dans le tableau, nous les convertissons en données au format json selon leur forme de valeur

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 />

Grâce au code ci-dessus, nous avons réussi à convertir plusieurs éléments de données du tableau en données au format json, puis nous pouvons envoyer les données Json en arrière-plan pour les traiter via ajax.

À ce stade, nous avons fini d'écrire le code pour obtenir plusieurs éléments de données dans le formulaire et les soumettre au serveur. Nous espérons que cela sera utile à l'apprentissage de chacun.