ボタンをクリックしてテーブルに行を追加するためのlayuiを実装する方法（手動で追加）-jsチュートリアル-php.cn

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

不言

リリース： 2018-09-07 15:29:27

オリジナル

12690 人が閲覧しました

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

問題の説明: ボタンをクリックしてテーブルに行を追加する機能を実装したいのですが、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);

ログイン後にコピー

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