前端模拟实现可编辑的表格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日，云栖大会在杭州盛大召开。本次大会以“计算，为了无法计算的价值”为主题&…...
PPT|230页| 制造集团企业供应链端到端的数字化解决方案：从需求到结算的全链路业务闭环构建
制造业采购供应链管理是企业运营的核心环节，供应链协同管理在供应链上下游企业之间建立紧密的合作关系，通过信息共享、资源整合、业务协同等方式，实现供应链的全面管理和优化，提高供应链的效率和透明度，降低供应链的成…...
Qt Widget类解析与代码注释
#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码，写上注释 当然可以！这段代码是 Qt …...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...
Unit 1 深度强化学习简介
Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...
Web 架构之 CDN 加速原理与落地实践
文章目录 一、思维导图二、正文内容（一）CDN 基础概念1. 定义2. 组成部分 （二）CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 （三）CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 …...
#Uniapp篇：chrome调试unapp适配
chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器：Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...
Vue ③-生命周期 || 脚手架
生命周期 思考：什么时候可以发送初始化渲染请求？（越早越好） 什么时候可以开始操作dom？（至少dom得渲染出来） Vue生命周期： 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...
ubuntu系统文件误删(/lib/x86_64-linux-gnu/libc.so.6)修复方案 [成功解决]
报错信息：libc.so.6: cannot open shared object file: No such file or directory： #ls, ln, sudo...命令都不能用 error while loading shared libraries: libc.so.6: cannot open shared object file: No such file or directory重启后报错信息&…...
【Post-process】【VBA】ETABS VBA FrameObj.GetNameList and write to EXCEL
ETABS API实战：导出框架元素数据到Excel 在结构工程师的日常工作中，经常需要从ETABS模型中提取框架元素信息进行后续分析。手动复制粘贴不仅耗时，还容易出错。今天我们来用简单的VBA代码实现自动化导出。 🎯 我们要实现什么？ 一键点击，就能将ETABS中所有框架元素的基…...
React父子组件通信：Props怎么用？如何从父组件向子组件传递数据？
系列回顾： 在上一篇《React核心概念：State是什么？》中，我们学习了如何使用useState让一个组件拥有自己的内部数据（State），并通过一个计数器案例，实现了组件的自我更新。这很棒&#…...