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、输入验证的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。