jQuery实现表格增删改（弹窗形式）
1.html
<div class="box set-metadata-management"> <div class="set-content"> <a href="javascript:void(0);" class="save-btn">新增</a> <table cellpadding="0" cellspacing="0" width="100%" class="skill_v3 ellipsis-table"> <thead> <tr> <th>元数据名称</th> <th>类型</th> <th>是否必填</th> <th class="th">操作</th> </tr> </thead> <tbody> <!--<tr>--> <!--<td>计算口径</td>--> <!--<td>基本信息1</td>--> <!--<td>是</td>--> <!--<td>--> <!--<a href="javascript:void(0);" class="blue mgr22 edit-btn">编辑</a>--> <!--<a href="javascript:void(0);" class="red del-btn">删除</a>--> <!--</td>--> <!--</tr>--> <!--<tr>--> <!--<td>编制时间</td>--> <!--<td>基本信息1</td>--> <!--<td>是</td>--> <!--<td>--> <!--<a href="javascript:void(0);" class="blue mgr22 edit-btn">编辑</a>--> <!--<a href="javascript:void(0);" class="red del-btn">删除</a>--> <!--</td>--> <!--</tr>--> <!--<tr>--> <!--<td>设计单位</td>--> <!--<td>基本信息2</td>--> <!--<td>是</td>--> <!--<td>--> <!--<a href="javascript:void(0);" class="blue mgr22 edit-btn">编辑</a>--> <!--<a href="javascript:void(0);" class="red del-btn">删除</a>--> <!--</td>--> <!--</tr>--> </tbody> </table> </div> </div>
<!-- 新增元数据弹层 --> <div class="modal modal-add" style="display:none;"> <div class="contrast_v3" style="width:400px;margin-left:-200px;margin-top:-135px;"> <div class="title_v3"> <div class="title_v3_l">新增元数据</div> <div class="title_v3_r"> <a href="javascript:;"class="close"></a> </div> </div> <div class="ensure-con add-metadata"> <div class="set-content"> <table cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <th>元数据名称：</th> <td> <input type="text" name="name" placeholder="请输入..."> </td> </tr> <tr> <th>类型：</th> <td> <select name="class"> <option value="0">基本信息</option> <option value="1">特征信息</option> </select> </td> </tr> <tr> <th>是否必填：</th> <td class="text-left"> <label class="custom-radio mgr60">是</label> <label class="custom-radio mgr60">否</label> </td> </tr> </tbody> </table> </div> </div> <div class="botton_v3"> <a class="on sure-btn" href="javascript:;">确定</a> <a class="close" href="javascript:;">取消</a> </div> </div> <!-- 遮罩 --> <div class="mask-layer"></div> <!-- 遮罩 --> </div>--> <!-- 新增元数据弹层 --> <!-- 提示弹层 --> <div style="display:none;" class="modal modal-tip"> <div class="contrast_v3" style="width:400px;margin-left:-200px;margin-top:-135px;"> <div class="title_v3"> <div class="title_v3_l">删除</div> <div class="title_v3_r"> <a href="javascript:;" class="close"></a> </div> </div> <div class="ensure-con"> <div class="ensure-icon"></div> <div class="ensure-wz">您确定要删除 <span></span> 吗？</div> </div> <div class="botton_v3"> <a class="on close sure-btn" href="javascript:;">确定</a> <a href="javascript:;" class="close">取消</a> </div> </div> <!-- 遮罩 --> <div class="mask-layer"></div> <!-- 遮罩 --> </div> <!-- 提示弹层 -->
2.css
.set-auditing-edit .warning-choose{letter-spacing: 3px;} .set-auditing-edit .warning-choose input{width: 20%;margin: 0 5px;} .set-content{margin-bottom: 30px;} .set-content th{font-weight:normal;text-align:right;color:#65737e;} .set-content td{height:42px;padding-left:20px;} .set-content .star{padding-right:4px;color:#ff6c6c;} .set-content input{width:280px;height:30px;line-height:30px;padding:0 5px;border:1px solid #ddd;border-radius:4px;color:#666;} .set-content select{width:292px;height:32px;line-height:32px;border:1px solid #ddd;border-radius:4px;color:#a0abbf;} .set-auditing-edit .set-content select{color:#333;} .set-content textarea{vertical-align: middle; width:280px;padding:0 5px;margin: 5px 0; border:1px solid #ddd;border-radius:4px;color:#a0abbf;resize: none;} .set-content .save-btn {display: inline-block;width: 100px;height: 32px;line-height: 32px;margin: 10px 0 30px 0;background-color: #feb32f;border-radius: 4px; color: #fff;text-align: center;text-decoration: none;}
.set-content .tr-time{display: none;}
//弹层
.contrast_v3{position: fixed;left: 50%;top:50%;z-index: 9999;width: 600px;margin-left: -300px;margin-top: -143px;border-radius: 5px;background-color: #fff;}
3.js
//radius切换 $(document).on('click','.custom-radio',function () { $(this).addClass('active').siblings().removeClass('active'); }); //元数据管理页面表格数据 var arr = [ {'name':'计算口径','class':'基本信息','choose':'是'}, {'name':'设计单位','class':'特征信息','choose':'否'}, {'name':'编制时间','class':'基本信息','choose':'是'}, {'name':'总层数','class':'特征信息','choose':'否'}, {'name':'计算口径','class':'基本信息','choose':'是'}, {'name':'编制时间','class':'基本信息','choose':'是'} ]; //初始化加载数据 function init() { $(".set-metadata-management tbody").empty(); $.each(arr,function (index,item) { $(".set-metadata-management tbody").append( `<tr class="data-tr" index="${index}"> <td>${item.name}</td> <td>${item.class}</td> <td>${item.choose}</td> <td> <a index="${index}" href="javascript:;" class="blue mgr22 edit-btn">编辑</a> <a index="${index}" href="javascript:;" class="red del-btn">删除</a> </td> </tr>` ) }); indexNumber(); } //排序处理 function indexNumber(){ $('.set-metadata-management tr').each(function(index, obj){ $(obj).attr('index',index-1); }); } //清空数据 function empty() { $('.add-metadata input').val(''); $('.add-metadata select option').removeAttr('selected'); $('.custom-radio:first-child').addClass('active').siblings().removeClass('active'); //radio默认是第一个 } //初始化 init(); //点击编辑 $('.set-metadata-management').on('click','.edit-btn',function () { empty(); var index = $(this).attr("index"); //添加下标 var data = arr[index]; $('.modal-add .title_v3_l').text('编辑元数据'); //修改弹层名称 $('.modal-add').show(200,function () { $('.add-metadata input').val(data.name); if(data.class === '基本信息'){ //判断select下拉菜单选择 $('.add-metadata select option[value="0"]').attr('selected','selected'); }else { $('.add-metadata select option[value="1"]').attr('selected','selected'); } if(data.choose === '是'){ //判断radius选中 $('.custom-radio:first-child').addClass('active').siblings().removeClass('active'); }else { $('.custom-radio:last-child').addClass('active').siblings().removeClass('active'); } }); $('.modal-add').one('click','.sure-btn',function (){ //点击确定按钮保存数据 $('.modal-add').hide(200,function () { var text = { //获取编辑的值 name:$('.add-metadata input').val(), class:$('.add-metadata select option:selected').text(), choose:$('.add-metadata .custom-radio.active').text() }; //替换编辑的数据 data.name = text.name; data.class = text.class; data.choose = text.choose; init(); //重新初始化 }); }); }); //点击删除 $('.set-metadata-management').on('click','.del-btn',function () { var that = this; var index = $(that).attr("index"); arr.splice(index,1); var value = $(that).parents('tr').find('td:eq(0)').text(); //获取标题名称 $('.modal-tip .ensure-wz>span').text(value); $('.modal-tip').show(200,function () { $('.modal-tip .sure-btn').click(function () { $(".data-tr[index="+index+"]").remove(); init(); }) }); }); //新增一行 $('.set-metadata-management').on('click','.save-btn',function () { empty(); $('.modal-add').show(200,function () { $('.modal-add .title_v3_l').text('新增元数据'); //修改弹层名称 $('.modal-add').one('click','.sure-btn',function () { //点击确定按钮获取数据 $('.modal').hide(200); var text = { name:$('.add-metadata input').val(), class:$('.add-metadata select option:selected').text(), choose:$('.add-metadata .custom-radio.active').text() }; var value = $.trim(text.name); // trim方法删除前后空格 if(value===''){ //名称不为空 alert('请输入名称'); return; } // var list = // '<tr class="data-tr" index="${index}">'+ // '<td>'+text.name+'</td>'+ // '<td>'+text.class+'</td>'+ // '<td>'+text.choose+'</td>'+ // '<td>'+ // '<a href="javascript:;" class="blue mgr22 edit-btn">'+'编辑'+'</a>'+ // '<a href="javascript:;" class="red del-btn">'+'删除'+'</a>'+ // '</td>'+ // '</tr>'; // $(".set-metadata-management tbody").prepend(list); arr.push(text); init(); }); }); }); //关闭弹层 $(document).on('click','.modal .close',function () { $(this).parents('.modal').hide(200); });
4.附图