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>

效果圖如下圖所示：