前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >动态生成表格、隐藏表格、选中删除任意行、jquery、输入验证

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

作者头像
微风-- 轻许--
发布2022-04-13 08:44:47
2.7K0
发布2022-04-13 08:44:47
举报
文章被收录于专栏:java 微风

PS:

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

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

想想还是写一点吧。

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

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

运行效果:

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

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

隐藏表格实现:

代码语言:javascript
复制
 <style type="text/css">
    	 #tableNone{
    	 	   display:none;/*表格以整个表格形式隐藏*/
   		 }
 </style>

两个表格的定义:

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

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

代码语言:javascript
复制
<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框是用来验证输入内容是否符合要求的,输入符合要求时不显示。

代码语言:javascript
复制
<span style="font-family: Arial, Helvetica, sans-serif;"><strong style="font-size:13px;padding-left:120px;">道具名、号 </strong></span>
代码语言:javascript
复制
			<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>

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

代码语言:javascript
复制
 //添加按钮点击事件
  	 	function addProp()
  	 	{
  	 	  //正则:非零和非零开头的数字:^([1-9][0-9]*)$
  	 	  var propNumReg = /^([1-9][0-9]*)$/;
  	   	  //得添加道具个数 
		  var propNum = $("#propNum").val();
		  //得道具的配置id
		  var 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)
 		 {
 		 	//动态生成tr
            var 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);
         }
代码语言:javascript
复制
//把选中行删除。
		 function choseWho(id){	
		  	 //删除选中行
		  	 $("#proptrid_"+id+"").remove();
		  	 //对隐藏表格作同样操作
		  	 $("#propNone_"+id+"").remove();
		 }

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016/03/01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档