前端模拟实现可编辑的表格table插件
在做项目中遇到了一个供货记录的功能，要求用户自己编辑添加删除表格数据，接下来我们就模拟下前端如何实现该功能
<!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没有，想看整个效果可以去下载对应的资源里面下载，感觉不错的点个赞哦。
相关文章：
前端模拟实现可编辑的表格table插件
在做项目中遇到了一个供货记录的功能，要求用户自己编辑添加删除表格数据，接下来我们就模拟下前端如何实现该功能 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta http-equiv"X-…...
PerfectPixel 插件，前端页面显示优化工具
1.简介 PerfectPixel 插件是一款适用于 Chrome 浏览器的网页前端页面显示优化工具，该插件能够帮助开发人员和标记设计人员在开发时将设计图直接加载至网页中，与已成型的网页进行重叠对比，以规范网页像素精度 作为一款可以优化前端页面显示的…...
mysql迁移data目录(Linux-Centos)
随着时间的推移，mysql的数据量越越大，使用yum默认安装的目录为系统盘 /var/lib/mysql，现重新挂载了一个硬盘，需要做数据目录的迁移到 /mnt/data/。以解决占用系统盘过高情况。 1.强烈建议这种操作。镜像一个一样的Centos系统&…...
linux-等保测评
#查看审计规则 #auditctl -l #添加审计规则 #auditctl -w /etc/passwd -p rwxa（注意：用 auditd 添加审计规则是临时的，立即生效，但是系统重启失效。） #-w path : 指定要监控的路径，上面的命令指定了监控的文…...
一、React基础知识
一、环境安装 第一种：使用原生搭建(可以从国内下载配置镜像、也可以从国外下载) 指令：1.国内下载：（1：npm config set registry https://r.npm.taobao.org// （2：npm install -g create-react-app…...
RocketMQ入门示例-生产者
大家好，本文主要是按照官网的教程把消费者和生产者的示例写下来，开箱即用。 RocketMQ安装 安装请参考官方安装教程： 快速开始 | RocketMQhttps://rocketmq.apache.org/zh/docs/quickStart/01quickstart 本人安装的是最新版本5.x，…...
2023面试知识点三
1、强软弱虚引用 强引用 当内存不足的时候，JVM开始垃圾回收，对于强引用的对象，就算是出现了OOM也不会对该对象进行回收，打死也不回收~！ 强引用是我们最常见的普通对象引用，只要还有一个强引用指向一个对象…...
【hcie-cloud】【1】华为云Stack解决方案介绍、华为文档获取方式 【上】
文章目录 华为文档获取方式前言云计算发展背景国家政策、社会发展驱动数字经济开启新时代深化数字化转型提升效率，国家数字主权云进入落地阶段从Cloud-Based到Cloud-Native，两种模式长期并存适合政企智能升级的云华为云Stack，政企智能升级首选…...
JS-类型转换
...
centos7计划任务crontab
当你需要在CentOS 7上定期执行一些任务时，crontab是一个非常有用的工具。它允许你按照预定的时间表自动运行脚本或命令。 1. 查看和编辑crontab 在CentOS 7上，每个用户都有一个自己的crontab文件，用于管理其定时任务。要查看当前用户的cron…...
pycharm 断点调试python Flask
以flask框架为例，其启动命令为 python app.py runserver 后面需要拼接runserver 点击开始断点 参考：https://www.cnblogs.com/bigtreei/p/14742015.html...
Jtti：redis出现太多连接错误怎么解决
Redis出现太多连接错误通常是由于一些常见问题引起的，这些问题可能会导致连接超限、性能下降或服务不可用。以下是一些可能导致Redis连接错误的原因以及如何解决它们的建议： 1. 连接泄漏： 连接泄漏是指在使用完Redis连接后没有正确关闭它们。…...
iOS实现弹簧放大动画
效果图 实现代码 - (void)setUpContraints {CGFloat topImageCentery (SCREEN_HEIGHT - 370 * PLUS_SCALE) / 2;[self.topIconView mas_makeConstraints:^(MASConstraintMaker *make) {make.centerX.mas_equalTo(0);make.centerY.equalTo(self.view.mas_top).with.offset(t…...
③ 软件工程CMM、CMMI模型【软考中级-软件设计师 考点】
个人简介：Java领域新星创作者；阿里云技术博主、星级博主、专家博主；正在Java学习的路上摸爬滚打，记录学习的过程~ 个人主页：.29.的博客 学习社区：进去逛一逛~ ③ 软件工程CMM、CMMI模型【软考中级-软件设计…...
JumpServer开源堡垒机与万里安全数据库完成兼容性认证
近日，中国领先的开源软件提供商FIT2CLOUD飞致云宣布，JumpServer开源堡垒机已经与万里安全数据库软件GreatDB完成兼容性认证。针对产品的功能、性能、兼容性方面，经过双方共同测试，万里安全数据库软件（简称：…...
蓝桥杯每日一题2023.10.31
题目描述 全球变暖 - 蓝桥云课 (lanqiao.cn) 题目分析 果然有关连通块类的问题使用dfs都较为好写~~ 我们可以通过判断连通块的代码来加上部分条件算出被完全淹没的岛屿个数 在岛屿中如果有为"#"的a[i][j]上下左右全部是"#"则说明此岛屿一定不会被完全…...
【兔子王赠书第5期】ChatGPT速学通：文案写作+PPT制作+数据分析+知识学习与变现
文章目录 前言ChatGPT推荐图书作者简介内容简介推荐理由 粉丝福利尾声 前言 程序员如果有一天代码写不动了，还能干什么？ 一位 80 后女程序员“兰猫”给出了她的答案——转型 AI 写手。兰猫从事程序员工作十余年，在繁重的工作压力下…...
selenium爬虫——以爬取澎湃新闻某搜索结果为例
文章目录 selenium爬虫——以爬取澎湃新闻某搜索结果为例前言需要导入的包需要避雷的点webdriver的版本要与浏览器一致如果使用爬虫打开了新网页，要记得跳转XPath和selector都可以直接复制爬取多网页时记得try打入word时调整字体的问题 完整程序扩展爬取效果 seleni…...
基于GEE云平台一种快速修复Landsat影像条带色差的方法
这是之前关于去除遥感影像条带的另一篇文章，因为出版商推迟了一年发布，所以让大家久等了。这篇文章的主要目的是对Landsat系列卫星因为条带拼接或者镶嵌产生的条带来进行的一种在线修复方式。 原文连接 一种快速修复Landsat影像条带色差的方法 题目&a…...
云栖大会 | 科技改变生活，移远通信实力引领智能未来
科技对生活的改变体现在出行方式、娱乐方式、支付方式等多个方面，已经融入了我们的日常生活，为我们带来了便捷、高效、舒适的体验。 10月31日—11月2日，云栖大会在杭州盛大召开。本次大会以“计算，为了无法计算的价值”为主题&…...
【限时解密】Perplexity写作辅助底层架构图首次公开：基于逆向分析的7大能力边界与替代方案评估
更多请点击： https://codechina.net 第一章：Perplexity写作辅助功能的定位与核心价值 Perplexity并非传统意义上的语法校对工具或模板生成器，而是一个以“问题驱动、证据锚定”为核心范式的智能写作协作者。它将用户输入的写作任务自动解构为…...
别再搞混了！SAP物料主数据、BOM、工艺路线里的三种损耗率（Scrap）到底怎么配？
SAP三大损耗率配置实战指南：从物料主数据到工艺路线的精准决策 在SAP PP模块实施过程中，物料损耗率的配置往往成为顾问团队争论的焦点。我曾参与过一个汽车零部件制造项目，由于初期对三种损耗率的理解偏差，导致MRP运算结果与实际情…...
小白程序员必看：四步轻松构建你的第一个AI编码Agent，收藏学习！
本文详细介绍了如何通过四个步骤构建一个基础的AI编码Agent，包括接入大型语言模型（LLM）、添加实用工具（如读取、写入和执行文件）、构建Agent循环以及实现对话循环。文章以Python语言为例，逐步引导读者完成整…...
飞凌FETMX8MP-C核心板多媒体实战：编解码、多屏与4K摄像头深度测评
1. 项目概述与核心板定位作为一名在嵌入式行业摸爬滚打了十多年的老工程师，我经手过不少核心板方案，从早期的ARM9到现在的多核A系列，各家方案在性能、功耗和功能集成度上的差异，直接决定了终端产品的竞争力。最近，飞凌…...
如何用四探针精确测量半导体电阻率
在半导体行业中，准确测量晶圆电阻率是材料研发和制程质量控制的关键环节。随着工艺节点不断缩小，器件对电性一致性的要求日益严格，仅靠经验无法满足现代制造的需求。因此工程师们大量采用四探针方法对电阻率进行高精度测量。相比传统测量方式…...
电脑突然‘哑巴’了？保姆级排查指南：从服务、驱动到系统修复，一步步搞定Win10音频问题
电脑突然‘哑巴’了？保姆级排查指南：从服务、驱动到系统修复，一步步搞定Win10音频问题 右下角的小喇叭突然打上红叉，视频会议开到一半突然失声，游戏打到关键处却没了音效——这些场景恐怕每个Windows 10用户都遭遇过。…...
MySQL-进阶篇-锁
温馨提示：建议在PC端浏览~锁概述介绍 锁是计算机协调多个进程或线程并发访问某一资源的机制。在数据库中，除传统的计算资源（CPU、RAM、I/O）的争用以外，数据也是一种供许多用户共享的资源。如何保证数据并发访问的一致性…...
DepHell与Docker集成：容器化Python应用开发的终极指南
DepHell与Docker集成：容器化Python应用开发的终极指南 【免费下载链接】dephell :package: :fire: Python project management. Manage packages: convert between formats, lock, install, resolve, isolate, test, build graph, show outdated, audit. Manage ven…...
安达发|aps软件系统：塑料薄膜业数字化升级，破生产管理难题
安达发APS高级生产计划智能排产排程自动排单软件系统推荐_MES 在包装、农业、电子、医疗等产业高速发展的带动下，我国塑料薄膜行业市场规模持续扩张，行业竞争从单纯的产能比拼转向精细化、智能化管理竞争。当前塑料薄膜企业普遍面临多品种、小批量、定制…...
从插值到积分：用np.interp和np.trapz，5步完成传感器数据平滑与能量估算（Python实战）
从插值到积分：用np.interp和np.trapz，5步完成传感器数据平滑与能量估算（Python实战） 在物联网和实验数据处理中，我们常常会遇到传感器采集的数据点稀疏或不均匀的问题。这种原始数据直接用于分析往往会导致结果不准确&…...