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> </td><td class="td_Oper" style="cursor: pointer;"><i class="layui-icon layui-icon-addition" onclick="add_line(this);"></i> </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…...
如何选择合适的服务器硬件和配置?
业务需求 了解您的业务需求和负载。这将帮助您确定需要哪种类型的服务器(如文件服务器、数据库服务器、Web服务器等)以及所需的处理能力、内存、存储和网络性能。...
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语言-参数假设检验
理论 方差分析(ANOVA, Analysis of Variance)是统计学中用来比较多个样本均值之间差异的一种方法。它通过将总变异分解为不同来源的变异来检测因子对响应变量的影响。方差分析广泛应用于实验设计、质量控制、医学研究等领域。 方差分析的基本模型 方差…...
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 接…...
微服务远程调用之拦截器实战
微服务远程调用之拦截器实战 前言: 在我们开发过程中,很可能是项目是从0到1开发,或者在原有基础上做二次开发,这次是根据已有代码做二次开发,需要在我们微服务一【这里方便举例,我们后面叫模版微服务】调用…...
德人合科技——天锐绿盾内网安全管理软件 | -文档透明加密模块
天锐绿盾文档加密功能能够为各种模式的电子文档提供高强度加密保护,丰富的权限控制以及灵活的应用管理,帮助企业构建更严密的立体保密体系。 PC地址: https://isite.baidu.com/site/wjz012xr/2eae091d-1b97-4276-90bc-6757c5dfedee ————…...
超融合架构下,虚拟机高可用机制如何构建?
作者:SmartX 产品部 钟锦锌 虚拟机高可用(High Availability,简称 HA)是虚拟化/超融合平台最常用、关键的功能之一,可在服务器发生故障时通过重建业务虚拟机以降低故障对业务带来的影响。因此,为了充分保障…...
工厂模式详情
一.介绍工厂模式的用途与特点 工厂方法模式是一种创建型设计模式, 其在父类中提供一个创建对象的方法, 允许子类决定实例化对象的类型。定义工厂方法模式(Fatory Method Pattern)是指定义一个创建对象的接口,但让实现这个接口的类来决定实例…...
【Word】调整列表符号与后续文本的间距
1. 默认的列表格式: 2. 修改间距: ************************************************** 分割线 ************************************************************ 3. 效果...
匠心独运,B 端系统 UI 演绎华章之美
匠心独运,B 端系统 UI 演绎华章之美...
Java电商平台-开放API接口签名验证(小程序/APP)
说明:在实际的生鲜业务中,不可避免的需要对外提供api接口给外部进行调用. 这里就有一个接口安全的问题需要沟通了。下面是干货: 接口安全问题 请求身份是否合法? 请求参数是否被篡改? 请求是否唯一? AccessKey&am…...
Tale全局函数对象base
目录 1、 Tale全局函数对象base 1.1、 * tale alert删除 1.2、 * 成功弹框 1.3、 * 弹出成功,并在500毫秒后刷新页面 1.4、 * 警告弹框 1.5、 * 询问确认弹框,这里会传入then函数进来...
【启程Golang之旅】掌握Go语言数组基础概念与实际应用
欢迎来到Golang的世界!在当今快节奏的软件开发领域,选择一种高效、简洁的编程语言至关重要。而在这方面,Golang(又称Go)无疑是一个备受瞩目的选择。在本文中,带领您探索Golang的世界,一步步地了…...
COMSOL中液晶材料光学特性模拟
前面我们根据FDTD官方文档设置了液晶指向的模型。COMSOL也可以根据相似的方法设置各项异性的周期性变化的材料。 该方法参考了luneburg_lens的COMSOL文档 在给出的文件中,可以发现定义-变量中可以使用默认坐标作为变量,即xyz。因此,折射率也可…...
虚拟现实环境下的远程教育和智能评估系统(五)
查阅相关VR眼动注意力联合教育学相关论文 1.Exploring Eye Gaze Visualization Techniques for Identifying Distracted Students in Educational VR(IEEE VR 2020) 摘要:我们提出了一种架构,使VR教学代理能够响应眼动追踪监控…...
【算法】模拟算法——Z字形变换(medium)
题解:模拟算法——Z字形变换(medium) 目录 1.题目2.题解3.参考代码4.总结 1.题目 题目链接:LINK 2.题解 利用模拟,来解决问题。 首先创建出一个O(numRows*n)的数组来,并按照题目要求把每个字符按顺序填进去。 这里以numRows…...
上位机图像处理和嵌入式模块部署(f103 mcu获取唯一id)
【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 对于stm32f103系列mcu来说,一般每一颗原厂的mcu,都会对应一个唯一的id。那这个id可以用来做什么用呢?个人认为&…...
运筹学_3.运输问题(特殊的线性规划)
目录 前言3.1 平衡运输问题中初始基可行解确定运输问题平衡运输与非平衡运输平衡运输问题的数学模型单纯形法解决平衡运输问题,初始可行基的确认 3.2 平衡运输问题的最优解判别求检验数表上作业法 3.3 产销不平衡的运输问题运输问题中产大于销的问题运输问题中产小于…...
使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式
一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明:假设每台服务器已…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现,展示如何创建和管理多个 OkHttpClient 实例,分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
大型活动交通拥堵治理的视觉算法应用
大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动(如演唱会、马拉松赛事、高考中考等)期间,城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例,暖城商圈曾因观众集中离场导致周边…...
多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验
一、多模态商品数据接口的技术架构 (一)多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如,当用户上传一张“蓝色连衣裙”的图片时,接口可自动提取图像中的颜色(RGB值&…...
css的定位(position)详解:相对定位 绝对定位 固定定位
在 CSS 中,元素的定位通过 position 属性控制,共有 5 种定位模式:static(静态定位)、relative(相对定位)、absolute(绝对定位)、fixed(固定定位)和…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务: test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer (1)资源 论文&a…...
JS手写代码篇----使用Promise封装AJAX请求
15、使用Promise封装AJAX请求 promise就有reject和resolve了,就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...
快刀集(1): 一刀斩断视频片头广告
一刀流:用一个简单脚本,秒杀视频片头广告,还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农,平时写代码之余看看电影、补补片,是再正常不过的事。 电影嘛,要沉浸,…...
tomcat指定使用的jdk版本
说明 有时候需要对tomcat配置指定的jdk版本号,此时,我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...
