html 页面表格添加行（可以直接使用）需要引入layui

Mike_lucy

已于 2023-04-03 08:57:22 修改

阅读量1.2k

点赞数 2

文章标签： html servlet 前端

于 2023-04-01 09:23:44 首次发布

本文链接：https://blog.youkuaiyun.com/Mike_lucy/article/details/129892753

版权

该文章展示了一个HTML页面中使用layui样式库创建的表格，包含姓名、性别和年龄字段以及删除操作。通过JavaScript实现动态添加和删除表格行的功能，点击添加按钮可以插入新行，点击删除按钮则移除当前行。当只剩一行时，不允许删除。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html页面内容

<table class="layui-table" id="table" lay-filter="table">
     <thead>
        <tr>
          <td>姓名：</td>
          <td>性别：</td>
          <td>年龄：</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="text" id="input_name" class="layui-input" name="name"/></td>
                        <td><input type="text" id="layui_sex" class="layui-input" name="sex"/></td>
                        <td><input type="text" id="layui_age" class="layui-input" name="age"/></td>
                        <td>
                            
                            <a class="layui-btn layui-btn-danger layui-btn-xs del">删除</a>
                        </td>
                    </tr>
                </tbody>
                    <input type="button" class="layui-btn layui-btn-xs add" value="添加"/>
            </table>

添加修改相关方法

<script type="text/javascript">
    $('body').on('click', '.add', function () {
        //要添加的html
        var html = '<tr>' +
            '<td><input type="text"  class="layui-input" name="name"></td>' +
            '<td><input type="text" class="layui-input" name="sex"/></td>' +
            '<td><input type="text"  class="layui-input" name="age"/></td>' +
            '<td>' + 
            '<a class="layui-btn layui-btn-danger layui-btn-xs del">删除</a>' +
            '</td>' +
            '</tr>';
        //添加到表格最后
        $(html).appendTo($('#table tbody:last'));
       // form.render();//更新全部表单数据
    });

    $('body').on('click', '.del', function () {
        if ($('#table tbody tr').length ===1) {
            layer.msg('只有一条不允许删除。');
        } else {
            //删除当前按钮所在的tr
            $(this).closest('tr').remove();
        }
    });
</script>