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>
效果图如下图所示: