layui表格的新增和编辑功能前端代码

html页面的代码（注意：引入layui相关的css）：

<div class="layui-form-item">

    <label class="layui-form-label">报价</label>

    <div class="layui-input-block">

        <table class="layui-table" id="serviceTables">

            <colgroup>

                <col width="60%">

                <col width="20%">

                <col width="20%">

            </colgroup>

            <thead>

                <tr>

                    <th>

                        服务项

                    </th>

                    <th><span>报价</span><span class="layui-table-sort layui-inline" style="margin-top: 5px"><i  class="layui-edge layui-table-sort-asc" title="升序"></i><i class="layui-edge layui-table-sort-desc" title="降序"></i></span></th>

                    <th>操作</th>

            </thead>

            <tbody>

                <tr>

                    <td>

                        服务项1

                    </td>

                    <td>50000.00</td>

                    <td>

                        <a href="#" class="co-green bjBtn">编辑</a>

                        <a href="#" class="co-green">删除</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        服务项2

                    </td>

                    <td>50000.00</td>

                    <td>

                        <a href="#" class="co-green bjBtn">编辑</a>

                        <a href="#" class="co-green">删除</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        服务项3

                    </td>

                    <td>50000.00</td>

                    <td>

                        <a href="#" class="co-green bjBtn">编辑</a>

                        <a href="#" class="co-green">删除</a>

                    </td>

                </tr>

                <tr>

                    <td>

                        服务项4

                    </td>

                    <td>50000.00</td>

                    <td>

                        <a href="#" class="co-green bjBtn">编辑</a>

                        <a href="#" class="co-green">删除</a>

                    </td>

                </tr>

            </tbody>

        </table>

        <button id="newBtn" type="button" class="layui-btn layui-btn-primary layui-btn-fluid"><i class="layui-icon"></i> 新增</button><br>

        <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid" style="margin-top: 5px" id="test2"><i class="layui-icon"></i> 上传报价函</button>

    </div>

</div>

js的编写（引入layui相关的js）：

<script type="text/javascript">

    layui.use(['upload','form','layer'], function(){

          var $ = layui.jquery

          ,upload = layui.upload

          ,form = layui.form;

        // 新增服务项目

    $("#newBtn").click(function() {

        var str = '';

        str += '<tr>';

        str += '<td>';

        str += '<input type="text"  placeholder="请输入" autocomplete="off"';

         str += 'class="layui-input">';

        str += '</td>';

        str += '<td><input type="text"   placeholder="请输入" autocomplete="off"';

         str += 'class="layui-input"></td>';

        str += '<td><button type="button" class="layui-btn layui-btn-xs qrBtn"> <i class="layui-icon">确定</i></button>';

        str += '<button type="button" class="layui-btn layui-btn-xs cancelBtn"><i class="layui-icon">取消</i></td>';

        str += '</tr>';

        $("#serviceTables").append(str);

    });

    // 确定

    $("#serviceTables").on("click",".qrBtn",function(){

        $("#serviceTables tr:last").remove();

        var newStr = '';

        var serviceName = $(this).parent().parent().find("td:nth-child(1)").find("input").val();

        var servicePrice = $(this).parent().parent().find("td:nth-child(2)").find("input").val();

        newStr += '<tr>';

        newStr += '<td>';

        newStr += serviceName;

        newStr += '</td>';

        newStr += '<td>' + servicePrice + '</td>';

        newStr += '<td><a href="#" class="co-green bjBtn">编辑</a>  <a href="#" class="co-green">删除</a></td>';

        newStr += '</tr>';

        $("#serviceTables").append(newStr);

    });

    // 编辑

    $("#serviceTables").on("click", ".bjBtn", function () {

        var thinLine = $(this).parents('tr');

        thinLine.each(function (i) {

            // var id = $(this).find("input[name='id']").val();

            var reg = /编辑/;// 遍历 tr

            $(this).children('td').each(function (j) {  // 遍历 tr 的各个 td

                // alert("第"+(i+1)+"行，第"+(j+1)+"个td的值："+$(this).text()+"。");

                var tdDom = $(this);

                //保存初始值

                var tdPreText = $(this).text();

                //给td设置宽度和给input设置宽度并赋值

                if (reg.test(tdPreText)) {

                    var newBtns = '<button type="button"  class="layui-btn layui-btn-xs qrBtn"><i class="layui-icon">确定</i></button>';

                    newBtns += '<button type="button" class="layui-btn layui-btn-xs cancelBtn"><i class="layui-icon">取消</i></button>';

                    $(this).html(newBtns);

                } else {

                    $(this).html("<input type='text'>").find("input").addClass('layui-input').val(tdPreText);

                }

            });

        });

    });

    });

</script>

效果图如下图所示：