JS implementiert die dynamische Generierung von Tabellen und übermittelt Tabellendaten an die backend_javascript-Fähigkeiten

Das Beispiel in diesem Artikel stellt den relevanten JS-Code zum dynamischen Generieren von Tabellen und zum Senden von Tabellendaten an das Backend vor. Der spezifische Inhalt ist wie folgt

Sehen wir uns zunächst die Anforderungen an: Erstellen Sie dynamisch eine Tabelle auf der Webseite, bearbeiten Sie die Daten in der Tabelle und senden Sie die Daten in der Tabelle dann zur Speicherung an den Back-End-Server.

Dann müssen wir als Erstes das Problem der dynamischen Generierung von Tabellen lösen

1. Zuerst müssen wir die JS-Bibliotheksdatei importieren.

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

2. Erstellen Sie dann vorab eine leere Tabelle im Seitenbereich, die nach Ihren Bedürfnissen bestimmt werden kann. Hier ist eine Tabelle mit einer Kopfzeile

<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. Nachdem die Tabelle erstellt wurde, können wir den Schlüsselcode für die dynamische Generierung der Tabelle schreiben. Wir schreiben eine js-Methode zum Auslösen

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

Wir können sehen, dass wir das d5fd7aea971a85678ba271703566ebfd-Tag hinzugefügt haben, das hauptsächlich zur Bereitstellung von Benutzereingabeparametern verwendet wird, und die globale Variable num wird hauptsächlich zur Unterscheidung der ID jedes hinzugefügten Parameters verwendet. Existierend aufgrund der Einzigartigkeit.

4. Als nächstes bedienen wir die Tabelle

//删除行
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");
}

Wir haben die Vorgänge in der obigen Tabelle gelöscht, bearbeitet, gespeichert und können je nach Bedarf angepasst werden. (Tatsächlich habe ich später herausgefunden, dass ich keine globale Nummer benötige und auch die Operation zum Hinzufügen von Zeilen implementieren kann. Was die Implementierung betrifft, handelt es sich hauptsächlich um einige js-Operationen. Ich werde es studieren, wenn ich Zeit habe.)

Zu diesem Zeitpunkt ist unser Seitencode zum dynamischen Generieren von Tabellen vollständig.

In der ersten Hälfte des Artikels haben wir darüber gesprochen,
wie man eine Tabelle dynamisch generiert Als nächstes werden wir darüber sprechen,wie man mehrere Daten erhält die Tabelle und übermitteln Sie sie an den Backend-Server.

Vor der Entwicklung habe ich auch einige Informationen im Internet gefunden, die entweder zu prägnant oder unverständlich waren, aber die meisten erwähnten die Verwendung von Json, um mehrere Parameter im Hintergrund zu übergeben, also habe ich den folgenden Code geschrieben .

1. Schauen wir uns zunächst an, wie man die Daten in der Tabelle erhält, oder kombinieren wir sie mit dem obigen Beispiel

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

Wir können sehen, dass wir außerhalb des Tabellen-Tags ein Formular-Tag hinzugefügt und die ID des Formular-Tags festgelegt haben.

2. Als nächstes erhalten wir die Parameter des Eingabe-Tags in der Form gemäß der „serialize()“-Methode von jQuery

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

3. Nachdem wir die Daten in der Tabelle erhalten haben, konvertieren wir sie entsprechend ihrer Wertform in Daten im JSON-Format

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

Mit dem obigen Code haben wir mehrere Daten in der Tabelle erfolgreich in Daten im JSON-Format konvertiert. Anschließend können wir die JSON-Daten zur Verarbeitung über Ajax an den Hintergrund senden.

Zu diesem Zeitpunkt haben wir den Code fertig geschrieben, um mehrere Daten im Formular abzurufen und an den Server zu senden. Wir hoffen, dass er zum Lernen aller beiträgt.