吕滔博客

最近做个源码加密打包的东东，服务器限制和参数这块儿需要动态添加一些值，于是直接用最简单的方法整了一个

 <table class="layui-table">
                        <thead>
                        <tr>
                            <td>域名</td>
                            <td>IP</td>
                            <td>MAC地址</td>
                            <td width="60"></td>
                        </tr>
                        </thead>
                        <tbody id="serverBox"></tbody>
                    </table>

模板代码

<script type="text/html" id="serverTemplate">
    <tr>
        <td><input type="text" name="data[server][{{d.id}}][domain]" autocomplete="off" class="layui-input"></td>
        <td><input type="text" name="data[server][{{d.id}}][ip]" autocomplete="off" class="layui-input"></td>
        <td><input type="text" name="data[server][{{d.id}}][mac]" autocomplete="off" class="layui-input"></td>
        <td>
            <div class="layui-btn-group">
                <button type="button" plain class="layui-btn layui-btn-xs  layui-btn-primary layui-border-green addServer"><i class="layui-icon layui-icon-addition"></i></button>
                <button type="button" plain class="layui-btn layui-btn-xs layui-btn-primary layui-border-red delServer"><i class="layui-icon layui-icon-subtraction"></i></button>
            </div>
        </td>
    </tr>
</script>

js部分

    window.server = function(id) {
      laytpl(serverTemplate.innerHTML).render({id: id}, function(html) {
        $('#serverBox').append(html);
        form.render();
      });
    };

    $(document).on('click', '.addServer', function(){
      return server(new Date().getTime());
    });

    $(document).on('click', '.delServer', function(){
      if($('#serverBox').find('tr').length === 1) return;//留一个
      return $(this).closest('tr').remove();
    });

    server(0);//初始化一个.