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

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

不言

Freigeben： 2018-09-07 15:29:27

Original

12696 Leute haben es durchsucht

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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

<🎜 geschrieben >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);

Nach dem Login kopieren

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!