当前位置：首页 > news >正文

前端模拟实现可编辑的表格table插件

news 2025/6/30 17:51:07

在做项目中遇到了一个供货记录的功能，要求用户自己编辑添加删除表格数据，接下来我们就模拟下前端如何实现该功能

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>可编辑的表格table</title><link rel="stylesheet" href="css/backstage.css"><script type="text/javascript" src="js/jquery.min.js"></script><script src="../js/template.js" type="text/javascript" charset="utf-8"></script><script src="../js/laydate/layer.js" type="text/javascript" charset="utf-8"></script><script type="text/html" id="v_every_ghrecord">{{if data && data.length>0}}{{each data as item index}}<tr><td><input type="text" name="NO" size="2" value="{{item.NO}}" /></td><td>{{item.type}}</td>{{if !item.realname}}<td><input type="text" placeholder="请输入姓名" class="expert_inp_w100"></td>{{else}}<td><input type="text"  class="expert_inp_w100" value={{item.realname}}></td>{{/if}}{{if !item.company_name}}<td><input type="text" placeholder="请输入所属公司" class="expert_inp_w100"></td>{{else}}<td><input type="text"  class="expert_inp_w100" value={{item.company_name}}></td>{{/if}}{{if !item.zhichen}}<td><input type="text" placeholder="请输入职称职务" class="expert_inp_w100"></td>{{else}}<td><input type="text"  class="expert_inp_w100" value="{{item.zhichen}}"></td>{{/if}}{{if !item.shenfenzheng}}<td><input type="text" placeholder="请输入身份证号" class="expert_inp_w100"></td>{{else}}<td><input type="text"  class="expert_inp_w100" value="{{item.shenfenzheng}}"></td>{{/if}}{{if !item.phone}}<td><input type="text" placeholder="请输入手机号" class="expert_inp_w100"></td>{{else}}<td><input type="text"  class="expert_inp_w100" value="{{item.phone}}"></td>{{/if}}<td><a href="#" class="td_a_3" id="Button2" onClick="deltr(this)">删除</a></td></tr>{{/each}}{{else}}<tr><td colspan="8"><p style="width:100%;text-align: center;margin-top: 12px;font-size:14px;font-weight: 700px">暂无信息!</p></td></tr>{{/if}}</script><!--添加删除专家--><script type="text/javascript">var show_count = 10; //要显示的条数$(function(){getDefaultdata();})//初始化函数：数据的回显  在煤婆网的路径为：WebRoot\localdata\ghrecord.json（数据格式可以借鉴）function getDefaultdata(){$.ajax({url:'./json/default.json',data:{},success:function (res) {if(res.code == '0'){var $data = res;if($data.data && $data.data.length>0){$data.data.forEach(function(obj){Object.assign(obj,{});})}var html_product = template('v_every_ghrecord',$data);$("#dynamicTbody").html(html_product);}else{layer.alert(data.message);}}})}// 新增操作：表格中添加一行数据function addtr(){var length = $("#dynamicTable tbody tr").length;if (length < show_count) {//点击时候，如果当前的数字小于递增结束的条件$("#tab11 tbody tr").clone().appendTo("#dynamicTable tbody"); //在表格后面添加一行changeIndex(); //更新行号}else{layer.alert("显示的条数最多为"+show_count+"条");return false;}}// 函数更新索引：新增，删除之后需要更新行号function changeIndex() {var i = 1;$("#dynamicTable tbody tr").each(function() { //循环tab tbody下的tr$(this).find("input[name='NO']").val(i++); //更新行号});}// 函数单行操作：删除每一行的数据function deltr(opp) {var length = $("#dynamicTable tbody tr").length;//alert(length);if (length <= 1) {alert("至少保留一行");} else {$(opp).parent().parent().remove(); //移除当前行changeIndex();}}</script></head><body><div class="fr w100"><div class="title_add"><a href="#" id="btn_addtr" onClick="addtr()"><span>新增</span></a></div><div class="content_mm"><table border="1" class="table_100 text_align_l" id="tab11" style="display: none"><tbody><tr><td><input type="text" name="NO" size="2" value="1" /></td><td>姓名</td><td><input type="text" placeholder="请输入专家姓名" class="expert_inp_w100"></td><td><input type="text" placeholder="请输入所属公司" class="expert_inp_w100"></td><td><input type="text" placeholder="请输入职称职务" class="expert_inp_w100"></td><td><input type="text" placeholder="请输入身份证号" class="expert_inp_w100"></td><td><input type="text" placeholder="请输入手机号" class="expert_inp_w100"></td><td><a href="#" class="td_a_3" id="Button2" onClick="deltr(this)">删除</a></td></tr></tbody></table><table border="1" class="table_100 text_align_l" id="dynamicTable"><thead><tr><th width="5%">ID</th><th width="10%">类型</th><th width="10%">姓名</th><th width="15%">所属公司</th><th width="10%">职称职务</th><th width="20%">身份证号</th><th width="20%">手机号</th><th width="10%">操作</th></tr></thead><tbody id="dynamicTbody"></tbody></table></div></div><!--下面是无用代码--><div style="display:none"><a href="http://www.bootstrapmb.COM">更多前端代码</a></div></body>
</html>

对应的数据为是模拟的，对应的文件为


{"code": 0,"msg": "","count": 5,"data": [{"NO":1,"type":"支付宝","realname":"zcz001","company_name":"公司001","zhichen":"A++","shenfenzheng":"1212121212122112","phone":"138356455455"},{"NO":2,"type":"微信","realname":"zcz002","company_name":"公司002","zhichen":"B++","shenfenzheng":"1212121212122222222112","phone":"138356455456"},{"NO":3,"type":"线下","realname":"zcz003","company_name":"公司003","zhichen":"C++","shenfenzheng":"12121212","phone":"138356455457"},{"NO":4,"type":"线上","realname":"zcz004","company_name":"公司004","zhichen":"D++","shenfenzheng":"1212121212112121212","phone":"138356455458"},{"NO":5,"type":"大大大","realname":"zcz005","company_name":"公司005","zhichen":"F++","shenfenzheng":"1212","phone":"138356455459"}]
}

以上就是对应的代码，部分js.css没有，想看整个效果可以去下载对应的资源里面下载，感觉不错的点个赞哦。

查看全文

http://www.lryc.cn/news/216455.html