So implementieren Sie Laui, um auf eine Schaltfläche zu klicken, um der Tabelle eine Zeile hinzuzufügen (manuell hinzugefügt)

Der Inhalt dieses Artikels befasst sich mit der Implementierung von Laui zum Hinzufügen einer Zeile zur Tabelle (manuell hinzugefügt). Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen helfen.

Problembeschreibung: Ich möchte die Funktion zum Klicken auf eine Schaltfläche implementieren, um der Tabelle eine Zeile hinzuzufügen, habe jedoch festgestellt, dass Lauii die Symbolleiste nicht integriert, daher muss ich diese Funktion manuell hinzufügen.

Ursprünglich wurde die geschriebene Tabelle wie folgt implementiert:

$("#addTable").click(function(){
			       var tr=" <tr>"+
			    	     "  <td>11</td>"+
			    	     "  <td>22</td>"+
			    	     "  <td>33</td>"+
			    	     "  <td>44</td>"+
			    	     "  <td>55</td>"+
			    	     "  </tr>";                  
					$(".layui-table").append(tr);
				});

Der zusätzliche Effekt konnte nach der Abfrage nicht erzielt werden. Es wurde festgestellt, dass dies auf der Tatsache beruht, dass die Tabelle statisch geschrieben ist Das heißt übrigens:

<table class="layui-table" lay-data="{height:315, url:&#39;/demo/table/user/&#39;, page:true, id:&#39;tableInfo&#39;}" lay-filter="test">			  	<thead>				    <tr>				      <th lay-data="{field:&#39;id&#39;, width:80, sort: true}">ID</th>				      <th lay-data="{field:&#39;username&#39;, width:80}">用户名</th>				      <th lay-data="{field:&#39;sex&#39;, width:80, sort: true}">性别</th>				      <th lay-data="{field:&#39;city&#39;}">城市</th>				      <th lay-data="{field:&#39;sign&#39;}">签名</th>				      <th lay-data="{field:&#39;experience&#39;, sort: true}">积分</th>				      <th lay-data="{field:&#39;score&#39;, sort: true}">评分</th>				      <th lay-data="{field:&#39;classify&#39;}">职业</th>				      <th lay-data="{field:&#39;wealth&#39;, sort: true}">财富</th>				    </tr>				  </thead>				</table>

und ich verwende diese Methode:

<table class="layui-hide" id="baseInfo"  lay-filter="demo" lay-data="{height: &#39;full-200&#39;, cellMinWidth: 80, page: true, limit:30}"></table>

Die Definition der Spaltennamen wird in der table.render({})-Methode

Lösung: Schreiben Sie die Tabelle als statisch um. Die Methode reicht aus, nämlich der zweite Teil des Codes

Zu diesem Zeitpunkt tritt ein neues Problem auf: Bei jedem Klick werden zwei Daten angezeigt, und zwar die folgenden Es sollten Änderungen vorgenommen werden:

$(".layui-table-body .layui-table").append(tr);

Klicken Sie abschließend auf die Schaltfläche, um ein neues zu erstellen. Der Effekt des Hinzufügens eines Datenelements.

Verwandte Empfehlungen:

JQuery implementiert dynamische Tabellen. Klicken Sie auf die Schaltfläche Tabelle, um eine row_jquery hinzuzufügen

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Laui, um auf eine Schaltfläche zu klicken, um der Tabelle eine Zeile hinzuzufügen (manuell hinzugefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!