动态生成表格、隐藏表格、选中删除任意行、jquery、输入验证

PS:

游戏公司后台开发,工作模式:996。

于是写博客这事也荒废了....

大哭大哭大哭大哭

想想还是写一点吧。

呵呵,请不要笑话我注释写这么多,习惯了,我上班写代码都是有注释的。




我建两个相似的表是为了,给后台使用人员显示所操作的数据,同时方便把开发人员真正要操作的数据传到对应Action中,隐藏开发人员传参用的表。

运行效果:

只显示给管理系统使用人员看的表:(单击选中任意行即删除该行,修改相同道具个数直接修改表中对应行数据)





不隐藏传参表时效果:(单击选中任意行即删除该行,修改相同道具个数直接修改表中对应行数据)




隐藏表格实现:

 <style type="text/css">#tableNone{display:none;/*表格以整个表格形式隐藏*/}</style>


两个表格的定义:

id="hidden"是用来传值,确定选中行的隐藏域。

id="tableNone"是不显示的表。

<input type="hidden" value="" id="hidden" /><li><div style="padding-left:190px;"><table border="1" cellspacing="0" id="table"></table> </div></li><li><div style="padding-left:190px;"><table   border="1" cellspacing="0" id="tableNone"></table> </div></li>




其余组件定义:

PS:

在此不讲述的:
οnkeyup="searchCard(this)"是用来实现在“道具名、号”输入框中输入道具的名字或编号就让下拉菜单自动选中对应道具的。

id="choseNotice"的input框是用来验证输入内容是否符合要求的,输入符合要求时不显示。



<span style="font-family: Arial, Helvetica, sans-serif;"><strong style="font-size:13px;padding-left:120px;">道具名、号 </strong></span>
			<input type="text" style="width: 50px; margin: 2px;" value="" οnkeyup="searchCard(this)"/><strong style="font-size:13px">道具个数 </strong><input id="propNum" type="text" style="width: 50px; margin: 4px;" value=""/><input type="button" value="添加" οnclick="addProp()" /><li><input size="40"; style="padding-left:190px; color:red;border-left:0px;border-top:0px;border-right:0px;border-bottom:1px;" id="choseNotice"/></li>


动态生成表格、选中删除任意行:

 //添加按钮点击事件function addProp(){//正则:非零和非零开头的数字:^([1-9][0-9]*)$var propNumReg = /^([1-9][0-9]*)$/;//得添加道具个数 var propNum = $("#propNum").val();//得道具的配置idvar propSid=$("#propList").val();//得当前下拉菜单选中option的文本值var options =$("#propList option:selected"); //没有选择道具不能添加if(options.text()=="--请选择道具--"){$("#choseNotice").val("请选择道具。");//显示是否选择道具提示框$("#choseNotice").show();return ;}//没有填写道具数量不能添加 if(propNum == ""){$("#choseNotice").val("请填写道具数量。");//显示是否选择道具提示框$("#choseNotice").show();return;}else if(!propNumReg.test(propNum)){$("#choseNotice").val("请填写零或非零开头的数字。");//显示是否选择道具提示框$("#choseNotice").show();return;}//隐藏是否选择道具提示框$("#choseNotice").hide();//id选择器得表格中的行,行不存在,即该种道具没有添加过。加前辍是为了防止别的变量值刚好和表中id值一样。if($("#proptdid_"+propSid+"").html()==undefined){//动态生成trvar tr = "<tr id='proptrid_"+propSid+"' οnclick='choseWho("+propSid+")' style='font-size:13px;'><td id='proptdid_"+propSid+"'>"+options.text()+"*"+propNum+"</td></tr>";//隐藏表格每行内容为:  道具配置id*道具个数var trNone = "<tr id='propNone_"+propSid+"' οnclick='choseWho("+propSid+")' style='font-size:13px;'><td id='propNone_"+propSid+"'>"+propSid+"*"+propNum+"!"+"</td></tr>";//拼接表格$("#table").append(tr);$("#tableNone").append(trNone);}else{//该行已经存在,直接修改该行显示内容。$("#proptdid_"+propSid+"").html(options.text()+"*"+propNum);//对隐藏表格作同样操作$("#propNone_"+propSid+"").html(options.text()+"*"+propNum);}
//把选中行删除。function choseWho(id){	//删除选中行$("#proptrid_"+id+"").remove();//对隐藏表格作同样操作$("#propNone_"+id+"").remove();}


隐藏表格每行内容多拼一个感叹号是为了服务端拿到数据便于拆分。










本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/452276.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安装 PrestaShop 1.6 - 详细的安装指南

2019独角兽企业重金招聘Python工程师标准>>> 详细的安装指南 下载和解压 PrestaShop 程序代码包 你可以从 PrestaShop 官方下载最新的版本&#xff0c;下载地址为&#xff1a;http://www.prestashop.com/en/download. 这里你只有一个选项&#xff0c;只能下载最新的…

学成在线--4.CMS页面管理开发(新增页面)

文章目录1.定义新增页面接口1&#xff09;在model工程中定义响应模型2&#xff09;在api工程中添加接口2.新增页面服务端开发1&#xff09;Dao2&#xff09;Service3&#xff09;Controller3.新增页面前端开发1&#xff09;创建page_add.vue2&#xff09;配置路由3&#xff09;…

嵌套For循环性能优化

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。1 案例描述某日&#xff0c;在JavaEye上看到一道面试题&#xff0c;题目是这样的&#xff1a;请对以下的代码进行优化 Java代码 for (int …

python-study-17

复习 上节课复习1、什么是模块模块是一系列功能的集合体2、为何用模块拿来&#xff08;内置或第三方的模块&#xff09;主义&#xff0c;提升开发效率自定义模块可以让程序的各部分组件重用模块内的功能3、如何用模块大前提&#xff1a;模块是被执行文件导入使用&#xff0c;模…

学成在线--5.CMS页面管理开发(修改页面)

文章目录1.修改页面流程1&#xff09;前端逻辑2&#xff09;后端逻辑2.修改页面接口定义3.后端开发--Dao4.后端开发--Service5.后端开发--Controller1&#xff09;根据id查询页面2&#xff09;保存页面信息6.前端开发--页面处理流程7.前端开发--编写page_edit.vue8.前端开发--配…

Map四种获取key和value值的方法,以及对map中的元素排序

2019独角兽企业重金招聘Python工程师标准>>> 获取map的值主要有四种方法&#xff0c;这四种方法又分为两类: 一类是调用map.keySet()方法来获取key和value的值&#xff0c; 另一类则是通过map.entrySet()方法来取值&#xff0c; 两者的区别在于&#xff0c;前者主要…

HTTP 协议(详解)

HTTP协议简介&#xff1a;HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写&#xff0c;是用于万维网&#xff08;www.world wide web&#xff09;服务器与本地浏览器之间传输文本的传输协议。 http请求协议与相应协议HTTP协议包含浏览器发送数据到服务器需要遵循…

React Native集成Redux框架讲解与应用

学过React Native的都知道&#xff0c;RN的UI是根据相应组件的state进行render的&#xff0c;而页面又是由大大小小的组件构成&#xff0c;导致每个组件都必须维护自身的一套状态&#xff0c;因此当页面复杂化的时候&#xff0c;管理state会相当吃力的。而redux提供了一套机制来…

学成在线--7.CMS页面管理开发(异常处理)

文章目录1.异常处理的问题分析2.异常处理流程3.可预知异常处理1.自定义异常类2.异常抛出类3.异常捕获类4.异常处理测试1&#xff09;定义错误代码2&#xff09;异常处理测试4.不可预知异常处理1.定义异常捕获方法1&#xff09;异常抛出测试2&#xff09;异常捕获方法1.异常处理…

Django(6)

为什么不用_set related_name和related_query_name的区别related_name将成为相关对象的属性&#xff0c;允许您使用外键对模型进行“倒退”。例如&#xff0c;如果ModelA有像下面这样的字段&#xff0c;那么model_b ForeignKeyField(ModelB, related_namemodel_as)这将使您能够…

P5 RV1126编码测试Demo

目录 前言 01 测试Demo大致流程图 02 代码分析 2.1 VI设备初始化 2.2 使能通道 —— RK_MPI_VI_EnableChn 2.3 VI 和 VENC绑定 2.4 创建 编码线程 前言 从本章开始我们将要学习嵌入式音视频的学习了 &#xff0c;使用的瑞芯微的开发板 &#x1f3ac; 个人主页&#xff1a…

MP算法和OMP算法及其思想

主要介绍MP(Matching Pursuits)算法和OMP(Orthogonal Matching Pursuit)算法[1]&#xff0c;这两个算法虽然在90年代初就提出来了&#xff0c;但作为经典的算法&#xff0c;国内文献(可能有我没有搜索到)都仅描述了算法步骤和简单的应用&#xff0c;并未对其进行详尽的分析&…

SpringMVC详细示例实战教程

一、SpringMVC基础入门&#xff0c;创建一个HelloWorld程序 1.首先&#xff0c;导入SpringMVC需要的jar包。 2.添加Web.xml配置文件中关于SpringMVC的配置 123456789101112131415<!--configure the setting of springmvcDispatcherServlet and configure the mapping-->&…

学成在线--8.Freemarker入门教程

文章目录1.FreeMarker介绍1&#xff09;常用的java模板引擎还有哪些&#xff1f;2&#xff09;freemarker是一个用Java开发的模板引擎3&#xff09;模板数据模型输出2.FreeMarker快速入门1&#xff09;创建测试工程2&#xff09;配置文件3&#xff09;创建模型类4&#xff09;创…

if...elif...else...fi和case...esac的脚本条件判断式

注意1&#xff1a; if 表达式和case 表达式的区别及什么时候使用哪个要有明确的区分&#xff1f; 『 if .... then .... fi 』对于变量的判断是以『比对』的方式来分辨的&#xff0c; 如果符合状态就进行某些行为&#xff0c;并且透过较多层次 (就是elif ) 的方式来进行多个变量…

安卓自定义View进阶-分类与流程

自定义View绘制流程函数调用链(简化版) 一.自定义View分类 我将自定义View分为了两类(sloop个人分类法&#xff0c;非官方)&#xff1a; 1.自定义ViewGroup 自定义ViewGroup一般是利用现有的组件根据特定的布局方式来组成新的组件&#xff0c;大多继承自ViewGroup或各种Layout&…

【笔试记录】2021/3/13美团

2021/3/13美团笔试 1.旋转二维数组 m, n map(int, input().split()) a [] for _ in range(m):a.append(list(map(int, input().split()))) for j in range(n):for k in range(m):print(a[k][j], end )print(end\n)输入输出 2.找出输入字符串中的所有数字 s input() n …

学成在线--9.页面静态化

文章目录一.页面静态化流程二.数据模型1.轮播图DataUrl接口1&#xff09;需求分析2&#xff09;接口定义3&#xff09;Dao4&#xff09;Service5&#xff09;Controller6&#xff09;测试2.远程请求接口1&#xff09;添加依赖2&#xff09;配置RestTemplate3&#xff09;测试Re…

数据库MySQL/mariadb知识点——日志记录(2)二进制日志

二进制日志 记录已提交事务导致数据改变或潜在导致数据改变的SQL语句&#xff0c;通过“重放”日志文件中的事件来生成数据副本&#xff0c;不依赖存储引擎类型。 开启二进制日志&#xff0c;默认是关闭的&#xff0c;二进制日志和数据分开存放 开启记录二进制文件的功能&#…

【面试记录】Python常见面试200题及答案总结

Python常见面试200题及答案总结 /待完善/ 1. 列出5个常用python标准库&#xff1f; os&#xff1a;提供了不少与操作系统相关联的函数&#xff0c;提供了一种可移植的使用操作系统功能的方法。使用os模块中提供的接口&#xff0c;可实现跨平台访问。但是&#xff0c;并不是所…