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();}

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