layuiはボタンをクリックしてテーブルに一行を追加します。
•問題の説明:ボタンを押して表に1行追加する機能を実現したいですが、layuiiはこのツールバーを統合していないことが分かりました。したがって、自分で手動でこの機能を追加する必要があります。
•最初に書いたテーブルはこのように実現されました。
列名の定義は
•ソリューション:テーブルを静的に書き換えるだけでいいです。すなわち、第二部分コードです。
•この時点で新しい問題が発生します。クリックするたびに2つのデータが表示されます。次のように修正するべきです。
締め括りをつける
以上は小编が皆さんに绍介したlayuiボタンをクリックしてテーブルに一行を追加しました。皆さんに何かお聞きしたいことがあれば、メッセージをください。小编はすぐに皆さんに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。
•最初に書いたテーブルはこのように実現されました。
$("#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:'/demo/table/user/', page:true, id:'tableInfo'}" lay-filter="test">
<thead>
<tr>
<th lay-data="{field:'id', width:80, sort: true}">ID</th>
<th lay-data="{field:'username', width:80}"> </th>
<th lay-data="{field:'sex', width:80, sort: true}"> </th>
<th lay-data="{field:'city'}"> </th>
<th lay-data="{field:'sign'}"> </th>
<th lay-data="{field:'experience', sort: true}"> </th>
<th lay-data="{field:'score', sort: true}"> </th>
<th lay-data="{field:'classify'}"> </th>
<th lay-data="{field:'wealth', sort: true}"> </th>
</tr>
</thead>
</table>
私が使っているのはこのような方式です。<table class="layui-hide" id="baseInfo" lay-filter="demo" lay-data="{height: 'full-200', cellMinWidth: 80, page: true, limit:30}"></table>
です。列名の定義は
table.render({})
方法で書かれています。•ソリューション:テーブルを静的に書き換えるだけでいいです。すなわち、第二部分コードです。
•この時点で新しい問題が発生します。クリックするたびに2つのデータが表示されます。次のように修正するべきです。
$(".layui-table-body .layui-table").append(tr);
最後にボタンを押してデータを追加する効果があります。締め括りをつける
以上は小编が皆さんに绍介したlayuiボタンをクリックしてテーブルに一行を追加しました。皆さんに何かお聞きしたいことがあれば、メッセージをください。小编はすぐに皆さんに返事します。ここでも私たちのサイトを応援してくれてありがとうございます。