Comment implémenter layui pour cliquer sur un bouton pour ajouter une ligne au tableau (ajouté manuellement)

Le contenu de cet article explique comment implémenter layui pour cliquer sur le bouton pour ajouter une ligne au tableau (ajouter manuellement). Il a une certaine valeur de référence. J'espère que cela vous aidera. Vous avez aidé.

Description du problème : je souhaite implémenter la fonction de cliquer sur un bouton pour ajouter une ligne au tableau, mais j'ai trouvé que layuii n'intègre pas la barre d'outils, je dois donc ajouter cette fonction manuellement ;

À l'origine, le tableau écrit est implémenté comme ceci :

$("#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);
				});

ne peut pas obtenir l'effet supplémentaire après interrogation, il a été constaté que cela est basé sur le fait que le tableau est écrit en ; de manière statique, c'est-à-dire :

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

Et ce que j'utilise est de cette façon :

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

La définition des noms de colonnes est écrite dans la méthode table.render({})

Solution : Réécrivez simplement la table dans une méthode statique, c'est-à-dire la deuxième partie du code

Un nouveau problème apparaîtra à ce moment : deux données apparaîtront à chaque fois que vous cliquez, et les modifications suivantes doivent être apportées :

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

Enfin, l'effet de cliquer sur le bouton pour ajouter une nouvelle donnée peut être obtenu.

Recommandations associées :

JQuery implémente des tables dynamiques. Cliquez sur le bouton table pour ajouter un row_jquery

.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!