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

js 表格添加|删除一行交互

一、需求

二、实现

<div style="margin-bottom: 55px"><form action="" method="post"  enctype="multipart/form-data" id="reportForm" name="sjf" style="margin-left: 25px;margin-bottom: 50px;"><table id="tableContent"><tbody>{foreach $list ke=>va}<tr id="line-1" class="layui-form layui-row layui-col-space16 tr-line"><td class="layui-form"><select name="selectkey[]" class="tr-select" style="width:186px;display:inline" oninput="handleSelectChange(event)"><option value="" >请选择</option>{foreach $selectList k=>v}<option value="{$v['key']}"  {if $ke == $v['key']} selected="selected" {/if}  >{$k}</option>{/foreach}</select></td><td class="td_Item"><input type="text" name="selectval[]" class="stepName" autocomplete="off" value="{$va}" oninput="handleInputChange(event)"></td><td class="td_Oper" style="cursor: pointer;"><i class="layui-icon layui-icon-close" onclick="remove_line(this);"></i>&nbsp;</td><td class="td_Oper" style="cursor: pointer;"><i class="layui-icon layui-icon-addition" onclick="add_line(this);"></i>&nbsp;</td></tr>{/foreach}</tbody></table><input type="hidden" name="immongoid" class="stepName" autocomplete="off" value="{$val['MongoID']}"><script type="text/javascript">//添加新记录function add_line(index) {//克隆上一行$("#tableContent tbody tr:last-child").clone().appendTo("#tableContent tbody");//将行尾克隆的值清空$("#tableContent tbody tr:last-child").find(":input").val('');$("#tableContent tbody tr:last-child").find("input").css('border-color','#468')}//删除选择记录function remove_line(index) {var keyindex = $("#tableContent tbody tr").index();if (keyindex > 0) {console.log($(index).parent().parent())$(index).parent().parent().remove();} else {layer.msg('第一行不能删除')return false;}}function closeFun(){$('.stepName').each(function(){$(this).css('border-color','#468')})$('.tr-select').each(function(){$(this).css('border-color','#468')})}function handleInputChange(e){$('.stepName').each(function(){if($(this)[0] == e.target){$(this).css('border-color','#468')}})}function handleSelectChange(e){$('.tr-select').each(function(){if($(this)[0] == e.target){$(this).css('border-color','#468')}})}# 表单验证并保存,一行中有未填写内容时input框标红并阻止提交function submitClick(inp){let isCheck = true;$('.tr-line').each(function(index,key){if($(this).find('select')){if($(this).find('select option:selected').text() == '请选择'){$(this).find('select').css('border-color','red');isCheck = false}else{$(this).css('border-color','#468')}if($(this).find('input').val() == ''){$(this).find('input').css('border-color','red');isCheck = false}else{$(this).css('border-color','#468')}}})if(!isCheck){return}$.ajax({url:'/ajax/test',data:$("#reportForm").serialize(),async:false,type:'post',dataType:'json',success:function(data){layer.msg('保存成功')}});}</script></form><div class="want_box-bottom1" style="margin-left: 32px;"><span><input type="submit" value="保存" onclick="submitClick(this)" class="gray-but"></span></div>{/if}</div>

相关文章:

js 表格添加|删除一行交互

一、需求 二、实现 <div style"margin-bottom: 55px"><form action"" method"post" enctype"multipart/form-data" id"reportForm" name"sjf" style"margin-left: 25px;margin-bottom: 50px;&quo…...

如何选择合适的服务器硬件和配置?

业务需求 了解您的业务需求和负载。这将帮助您确定需要哪种类型的服务器&#xff08;如文件服务器、数据库服务器、Web服务器等&#xff09;以及所需的处理能力、内存、存储和网络性能。...

Prometheus + Grafana + Alertmanager 系统监控

PrometheusGrafana 系统监控 1. 简介1.1 Prometheus 普罗 米修斯1.2 Grafana 2. 快速试用2.1 Prometheus 普罗 米修斯2.2 Prometheus 配置文件2.3 Grafana 2. 使用 Docker-Compose脚本部署监控服务3. Grafana 配置3.1 配置数据源 Prometheus3.2 使用模板ID 配置监控模板3.3 使用…...

5.23R语言-参数假设检验

理论 方差分析&#xff08;ANOVA, Analysis of Variance&#xff09;是统计学中用来比较多个样本均值之间差异的一种方法。它通过将总变异分解为不同来源的变异来检测因子对响应变量的影响。方差分析广泛应用于实验设计、质量控制、医学研究等领域。 方差分析的基本模型 方差…...

rnn 和lstm源码学习笔记

目录 rnn学习笔记 lstm学习笔记 rnn学习笔记 import torchdef rnn(inputs, state, params):# inputs的形状: (时间步数量, 批次大小, 词表大小)W_xh, W_hh, b_h, W_hq, b_q paramsH stateoutputs []# 遍历每个时间步for X in inputs:# 计算隐藏状态 HH torch.tanh(torch.…...

解析Java中1000个常用类:CharSequence类,你学会了吗?

在 Java 编程中,字符串操作是最常见的任务之一。为了提供一种灵活且统一的方式来处理不同类型的字符序列,Java 引入了 CharSequence 接口。 通过实现 CharSequence 接口,各种字符序列类可以提供一致的 API,增强了代码的灵活性和可扩展性。 本文将深入探讨 CharSequence 接…...

微服务远程调用之拦截器实战

微服务远程调用之拦截器实战 前言&#xff1a; 在我们开发过程中&#xff0c;很可能是项目是从0到1开发&#xff0c;或者在原有基础上做二次开发&#xff0c;这次是根据已有代码做二次开发&#xff0c;需要在我们微服务一【这里方便举例&#xff0c;我们后面叫模版微服务】调用…...

德人合科技——天锐绿盾内网安全管理软件 | -文档透明加密模块

天锐绿盾文档加密功能能够为各种模式的电子文档提供高强度加密保护&#xff0c;丰富的权限控制以及灵活的应用管理&#xff0c;帮助企业构建更严密的立体保密体系。 PC地址&#xff1a; https://isite.baidu.com/site/wjz012xr/2eae091d-1b97-4276-90bc-6757c5dfedee ————…...

超融合架构下,虚拟机高可用机制如何构建?

作者&#xff1a;SmartX 产品部 钟锦锌 虚拟机高可用&#xff08;High Availability&#xff0c;简称 HA&#xff09;是虚拟化/超融合平台最常用、关键的功能之一&#xff0c;可在服务器发生故障时通过重建业务虚拟机以降低故障对业务带来的影响。因此&#xff0c;为了充分保障…...

工厂模式详情

一.介绍工厂模式的用途与特点 工厂方法模式是一种创建型设计模式&#xff0c; 其在父类中提供一个创建对象的方法&#xff0c; 允许子类决定实例化对象的类型。定义工厂方法模式(Fatory Method Pattern)是指定义一个创建对象的接口&#xff0c;但让实现这个接口的类来决定实例…...

【Word】调整列表符号与后续文本的间距

1. 默认的列表格式&#xff1a; 2. 修改间距&#xff1a; ************************************************** 分割线 ************************************************************ 3. 效果...

匠心独运,B 端系统 UI 演绎华章之美

匠心独运&#xff0c;B 端系统 UI 演绎华章之美...

Java电商平台-开放API接口签名验证(小程序/APP)

说明&#xff1a;在实际的生鲜业务中&#xff0c;不可避免的需要对外提供api接口给外部进行调用. 这里就有一个接口安全的问题需要沟通了。下面是干货: 接口安全问题 请求身份是否合法&#xff1f; 请求参数是否被篡改&#xff1f; 请求是否唯一&#xff1f; AccessKey&am…...

Tale全局函数对象base

目录 1、 Tale全局函数对象base 1.1、 * tale alert删除 1.2、 * 成功弹框 1.3、 * 弹出成功,并在500毫秒后刷新页面 1.4、 * 警告弹框 1.5、 * 询问确认弹框,这里会传入then函数进来...

【启程Golang之旅】掌握Go语言数组基础概念与实际应用

欢迎来到Golang的世界&#xff01;在当今快节奏的软件开发领域&#xff0c;选择一种高效、简洁的编程语言至关重要。而在这方面&#xff0c;Golang&#xff08;又称Go&#xff09;无疑是一个备受瞩目的选择。在本文中&#xff0c;带领您探索Golang的世界&#xff0c;一步步地了…...

COMSOL中液晶材料光学特性模拟

前面我们根据FDTD官方文档设置了液晶指向的模型。COMSOL也可以根据相似的方法设置各项异性的周期性变化的材料。 该方法参考了luneburg_lens的COMSOL文档 在给出的文件中&#xff0c;可以发现定义-变量中可以使用默认坐标作为变量&#xff0c;即xyz。因此&#xff0c;折射率也可…...

虚拟现实环境下的远程教育和智能评估系统(五)

查阅相关VR眼动注意力联合教育学相关论文 1.Exploring Eye Gaze Visualization Techniques for Identifying Distracted Students in Educational VR&#xff08;IEEE VR 2020&#xff09; 摘要&#xff1a;我们提出了一种架构&#xff0c;使VR教学代理能够响应眼动追踪监控…...

【算法】模拟算法——Z字形变换(medium)

题解&#xff1a;模拟算法——Z字形变换(medium) 目录 1.题目2.题解3.参考代码4.总结 1.题目 题目链接&#xff1a;LINK 2.题解 利用模拟&#xff0c;来解决问题。 首先创建出一个O(numRows*n)的数组来&#xff0c;并按照题目要求把每个字符按顺序填进去。 这里以numRows…...

上位机图像处理和嵌入式模块部署(f103 mcu获取唯一id)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 对于stm32f103系列mcu来说&#xff0c;一般每一颗原厂的mcu&#xff0c;都会对应一个唯一的id。那这个id可以用来做什么用呢&#xff1f;个人认为&…...

运筹学_3.运输问题(特殊的线性规划)

目录 前言3.1 平衡运输问题中初始基可行解确定运输问题平衡运输与非平衡运输平衡运输问题的数学模型单纯形法解决平衡运输问题&#xff0c;初始可行基的确认 3.2 平衡运输问题的最优解判别求检验数表上作业法 3.3 产销不平衡的运输问题运输问题中产大于销的问题运输问题中产小于…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...