ボタンをクリックしてテーブルに行を追加するためのlayuiを実装する方法（手動で追加）

この記事の内容は、ボタンをクリックしてテーブルに行を追加する（手動で追加する）方法についてです。必要な友人が参考になれば幸いです。あなたへ。

問題の説明: ボタンをクリックしてテーブルに行を追加する機能を実装したいのですが、layuii にはツールバーが統合されていないことがわかったので、この機能を手動で追加する必要があります。 write は次のように実装されました:

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

は追加の効果を達成できません; クエリの後、これはテーブルが静的な方法で書かれているという事実に基づいていることがわかりました:

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

そして私が使用したのはこのように:

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

列名の定義が書き込まれます。 table.render({}) メソッドの

ソリューション: テーブルを静的メソッド、つまりコードの 2 番目の部分に書き換えます

Aこの時点で新たな問題が発生します。クリックするたびに 2 つのデータが表示されます。次の変更を加えてください:

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

最後に、ボタンをクリックしてデータを追加する効果を実現できます。

関連する推奨事項:

JQuery を使用して動的テーブルを実装し、ボタンテーブルをクリックして row_jquery を追加します

以上がボタンをクリックしてテーブルに行を追加するためのlayuiを実装する方法（手動で追加）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。