动态生成表格、隐藏表格、选中删除任意行、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();}
隐藏表格每行内容多拼一个感叹号是为了服务端拿到数据便于拆分。
动态生成表格、隐藏表格、选中删除任意行、jquery、输入验证相关推荐
- Java中利用freemarker模板动态生成word含表格
最近公司有导出word的需求,由于word的样式有的很复杂所以记录一下Java中利用freemarker模板动态生成word含表格,以防以后忘记. 1.word表格的模板 删掉无用的数据留下基础的样式 ...
- android 动态显示表格,在Android Studio中动态生成并显示表格
我在Android上创建我的第一个应用程序,因此我有低开发android应用程序的经验,而且我也是第一次使用java.在Android Studio中动态生成并显示表格 我想要什么? 我想从Array ...
- iden中html中表格自动生成,JS实现动态生成html table表格的方法分析
本文实例讲述了JS实现动态生成html table表格的方法.分享给大家供大家参考,具体如下: 刚在论坛上面逛的时候看到有人问html表格怎么动态生成,我回了一下发现有好多小伙伴追问- - 看来还是有 ...
- java excel中删除两列_Java 插入、隐藏/显示、删除Excel行或列
概述 操作Excel工作表时,对表格中的行或列数据可执行,包括插入.隐藏.显示.删除等在内的多种操作需求,本文将通过Java代码示例演示每种操作的具体实现方法.文中方法使用了Java Excel类库( ...
- java excel插入列_Java 插入、隐藏/显示、删除Excel行或列
概述 操作Excel工作表时,对表格中的行或列数据可执行,包括插入.隐藏.显示.删除等在内的多种操作需求,本文将通过Java代码示例演示每种操作的具体实现方法.文中方法使用了Java Excel类库( ...
- js 通过多规格及每个规格对应多个规格值动态生成规格明细表格
动态表格如下: /*** 设置表格数据 该方法在新增规格.新增规格值.规格和规格值的文本改变都要调用*/setTableList(){let newList=[];this.getRowList(nu ...
- android 动态生成tablelayout,Android 表格布局TableLayout示例详解
一.表格布局 TableLayout 表格布局TableLayout以行列的形式管理子元素,每一行是一个TableRow布局对象,当然也可以是普通的View对象,TableRow离每放一个元素就是一列 ...
- 前端动态生成横向树形表格
一.问题 遇到项目需求是横向展示树形数据,之前写的时候element的官方有加载树形数据的表格组件,项目其他地方有用表格组件的写的demo,但是涉及到行合并的逻辑判断,一时没搞清楚,就用原生画了表格. ...
- wps excel 表格粘贴到 word 删除首行缩进
问题: 解决: 1.选中表格,段落首行缩进改为空格 2.删除段首空格
最新文章
- HDU2544(Dijstra算法)
- kubectl bash补全
- ASP.NET Aries JSAPI 文档说明:AR.DataGrid、AR.Dictionary
- 男人都应该懂的一张图。。 | 今日趣图
- java默认数组值_数组元素默认的初始值都是什么
- python shell 方向键不可用
- VSCode 上竟然也能约会,谈对象了???
- [leetcode]72. Edit Distance 最少编辑步数
- linux centos无线网卡驱动安装,CentOS 无线网卡驱动安装
- linux远程控制木马,Kali Linux-使用Shellter生成远控木马并进行持久化控制
- 虚拟机Ubuntu复制粘贴到主机(不安装vmware-tools实现两者之间文件共享)
- KVM虚拟化技术实践
- LTE解MIB块,LTE中PBCH过程
- 联想笔记本e43l_联想笔记本E43L的产品介绍
- 合并多个文件内容到同一个文件
- 核心交换机与普通交换机的区别
- gcc -O0 -O1 -O2 -O3 四级优化选项及每级分别做什么优化
- 3DMM(3D Morphable Model)原理和实现
- Java问题——can not be represented as java.sql.Date 错误解决
- Magnetic Levitation for Soft-Tethered Capsule Colonoscopy Actuated With a Single Permanent Magnet
热门文章
- codesys raspberry pi_pi进不去的几种解决方法!
- CCIE理论第三篇-LISP技术
- 【CodeForces - 349C】Mafia(思维模拟,优秀的二分)
- 【HDU - 2072 】单词数(字符串读入技巧,sstream大法,水题,字符串读入格式)
- html以图像中心定位,在HTML图像上水平和垂直居中文本(绝对定位)
- wp config.php mysql_WordPress手动配置wp-config.php文件
- php e notice,PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
- 初学多线程使用中踩过的坑
- 学习笔记14-C语言-小项目-通讯录
- 《Head First设计模式》第九章(1)迭代器模式