JS+jQuery+Easyui實現動態新增控制元件及賦值
阿新 • • 發佈：2019-01-12
背景：某天陽光明媚的午後，和小夥伴們完一個遊戲，在一個黑箱中放了紅橙黃綠青藍紫七種顏色的球，我讓幾名玩遊戲的小夥伴分別從黑箱裡抓球，並且統計他們都抓了哪種顏色的球。。最後的結果是，有抓的多，有抓的少，抓到的顏色也不一樣。
那麼問題來了！！
如果讓你做一個統計軟體怎麼記錄小夥伴的都抓了幾個球並且什麼顏色的球？
以下是asp程式碼：
<span style="font-size:12px;"><span style="font-size:14px;"><!DOCTYPE html> <head> <title>Index</title> <script src="../../Scripts/MyScript/Checkpeople.js"></script> <link href="../../CSS/test.css" rel="stylesheet" /> <script src="../../Scripts/StartExam/StartExam.js"></script> <script src="../../Content/jquery-easyui-1.3.2/locale/easyui-lang-zh_CN.js"></script> <script type="text/javascript" src="../../Content/jquery-easyui-1.3.2/jquery.easyui.min.js"></script> <link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../Content/jquery-easyui-1.3.2/themes/icon.css"> <div id="mainbody"> <div id="bodytitle">玲博拿到的球</div> <table id="tab1" align="center" style="padding-top:100px" border="0" cellPadding="1" cellSpacing="0" borderColorLight="#999999" borderColorDark="#ffffff" style="width:50%;word-break: break-all"> <tr > <td > <input type="hidden" name="fuJ" id="fuJ1" /> </td> <td id="Exam0" class="firstline" align="right">顏色</td> <td><input id="MainTeacher" class="easyui-combobox" data-options="" align="center"/></td> <td><a type="button"class="easyui-linkbutton" name="Submit" value="增加一行" data-options="iconCls:'icon-add'" onclick="javascript: AddRow();" /> <a type="button"class="easyui-linkbutton" name="Submit" value="刪除一行" data-options="iconCls:'icon-remove'" onclick="javascript: DelRow();" /> </tr> <tr> <td><input type="checkbox" id="box1" onClick="GetRow()"/></td> <input type="hidden" name="fuJ"/> <td id="Exam0" class="firstline" align="right">顏色</td> <td><input id="cc1" name="dept" value=""> </td> </tr> <script type="text/javascript"> $('#cc1').combobox({ valueField: 'ID', textField: 'ColorBall', url: '/PlayGame/ColorBall' }); </script> </table>
Js程式碼-在上面程式碼中引用
經過了修改和測試，得到上面的程式碼就可以實現動態的新增頁面中的控制元件，但是它並不是最完美的程式碼，還有很多問題需要解決：例如考慮到給使用者帶來方便，預設給使用者加載出預設值，這樣就可以讓使用者儘可能的少操作軟體，體驗軟體帶來的方便；新增一個控制元件之後後面的控制元件是沒有辦法獲取值，這裡就要用到迴圈載入控制元件及賦值；對於頁面中新增多餘的軟體進行動態的刪除。最後將頁面資料儲存到資料庫中。<span style="font-size:12px;"><span style="font-size:14px;">////新增一行 $(document).ready(function () { //刪除按鈕載入減號 $('#btn_Add2').combobox({ cache: false, iconCls: 'icon-remove' }) //新增按鈕載入加號 $('#btn_Add1').combobox({ cache: false, iconCls: 'icon-add' }) //第一行顏色，賦值 $('#MainTeacher').combobox({ valueField: 'year', textField: 'year', url: '/AddExam/GetGrade' }) function AddRow() { //新增一行 var i = tab1.rows.length;//頁面上存在行數 var Nam = "'div1'"; var Cod = "fuJ" + i; var newTr = tab1.insertRow(); //新增列 var newTd0 = newTr.insertCell(); var newTd1 = newTr.insertCell(); var newTd2 = newTr.insertCell(); var newTd3 = newTr.insertCell(); //設定列內容和屬性 newTd0.innerHTML = '<input type="checkbox" id="box1" onClick="GetRow()"/ /><input type="hidden" name="fuJ" id=' + Cod + ' />'; newTd1.innerHTML = '<td id="Exam0" class="firstline" align="right">顏色</td>'; newTd2.innerHTML = '<td><input id="cc" name="test" class="easyui-combobox"/></td>'; $("#cc").combobox({ valueField: 'year', textField: 'year', url: '/AddExam/GetGrade' }) } function DelRow() { //刪除一行 var shu=0; var cheCou=document.all("box1");//頁面上所有的複選框 for(var i=1;i<cheCou.length;i++)// { if (cheCou[i].checked==true) { shu++; } } if(shu==cheCou.length) { alert('最少要新增一個數據'); return; } else if(shu==0) { alert('請選擇你要刪除的資訊'); return; } else if(shu==2)// { for(var i=1;i<cheCou.length;i++)// { if(cheCou[i].checked==true) { tab1.deleteRow(i+1); } } } else if(shu>1) { for(var a=0;a<shu;a++) { for(var i=0;i<cheCou.length;i++) { if(cheCou[i].checked==true) { tab1.deleteRow(i+1); break; } } } } } function GetRow() { //獲得行索引 //兩個parentElement分別是TD和TR喲，rowIndex是TR的屬性 cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex; }
上面的程式碼只是千千萬萬中方法中的一種，還有很多其他更為靈活和方便的方法需要去試驗和比對。博主繼續測試，然後在分享給大家。。