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++; }
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"); }
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.
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>
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 />
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.