一個簡單的資產管理表
阿新 • • 發佈：2018-06-19
box tle char jquer tee append 操作 push ack
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 7 <script src="jquery-3.1.1.js"></script> 8 <script> 9 $(document).ready(function () {10 window.onclick = function () { 11 debugger; 12 var oName = document.getElementById(‘name‘); 13 var oType = document.getElementById(‘Select1‘); 14 var oHt = document.getElementById(‘ht‘); 15 var oZc = document.getElementsByName(‘hth‘); 16 var oZcc; 17 for (var i = 0; i < oZc.length; i++) { 18 if (oZc[i].checked) { 19 oZcc = oZc[i].value; 20 } 21 } 22 var oZr = document.getElementById(‘zr‘).value;23 var oZq = document.getElementById(‘zq‘).value; 24 var oZj = document.getElementById(‘zj‘).value; 25 var oAddress = document.getElementsByName(‘cool‘); 26 //var sum2 = ‘‘; 27 //for (var i = 0; i < oAddress.length; i++) { 28 // if (oAddress[i].checked) { 29 // sum2 = sum2 + oAddress[i].value; 30 // } 31 //}
//利用jquery代碼進行復選框的取值，也可以取單選框的值，復選框用數組取值，單選框不必這樣
32 var sum2=[]; 33 $(‘[name="cool"]:checked‘).each(function () { 34 35 sum2.push($(this).val()); 36 }) 37 var oCoolk = document.getElementById(‘checked‘); 38 39 var oTable = document.getElementById(‘table2‘); 40 var oButton1 = document.getElementById(‘button1‘); 41 var oButton2 = document.getElementById(‘button2‘); 42 43 oButton1.onclick = function () { 44 var oTr = document.createElement(‘tr‘); 45 var oTd = document.createElement(‘td‘); 46 oTd.innerHTML = oName.value; 47 oTr.appendChild(oTd); 48 49 var oTd = document.createElement(‘td‘); 50 oTd.innerHTML = oType.value; 51 oTr.appendChild(oTd); 52 53 var oTd = document.createElement(‘td‘); 54 oTd.innerHTML = oHt.value; 55 oTr.appendChild(oTd); 56 57 var oTd = document.createElement(‘td‘); 58 oTd.innerHTML = oZcc; 59 oTr.appendChild(oTd); 60 61 var oTd = document.createElement(‘td‘); 62 oTd.innerHTML = sum2; 63 oTr.appendChild(oTd); 64 65 66 var oTd = document.createElement(‘td‘); 67 oTd.innerHTML = ‘<a href="javascript:;">刪除</a>‘; 68 oTr.appendChild(oTd); 69 70 71 //刪除的操作 72 oTd.getElementsByTagName(‘a‘)[0].onclick = function () { 73 oTable.removeChild(this.parentNode.parentNode); 74 } 75 76 oTable.appendChild(oTr); 77 } 78 } 79 }) 80 81 82 </script> 83 </head> 84 <body> 85 <div> 86 <div style="border:1px"><h1>教室資產登記-物聯網工程學院</h1></div> 87 <div style="border:1px"> 88 <table id="table1"> 89 <tr> 90 <td>資產名稱:</td> 91 <td> 92 <input type="text" id="name" /> 93 </td> 94 </tr> 95 <tr> 96 <td>類別:</td> 97 <td> 98 <select id="Select1"> 99 <option value="教室">教室</option><option value="教學樓">教學樓</option><option value="教研室">教研室</option> 100 </select> 101 </td> 102 </tr> 103 <tr> 104 <td>合同號:</td> 105 <td> 106 <input type="text" id="ht" /> 107 </td> 108 </tr> 109 <tr> 110 <td>租出單位:</td> 111 <td> 112 <input id="Radio1" type="radio" value="x1公司" name="hth" />x1公司<input id="Radio2" type="radio" value="x2公司" name="hth" />x2公司<input id="Radio3" type="radio" value="x3公司" name="hth" />x3公司<input id="Radio4" type="radio" value="x4公司" name="hth" />x4公司 113 </td> 114 </tr> 115 <tr> 116 <td>租入日期:</td> 117 <td> 118 <input type="text" id="zr" /> 119 </td> 120 </tr> 121 <tr> 122 <td>租期:</td> 123 <td> 124 <input type="text" id="zq" /> 125 </td> 126 </tr> 127 <tr> 128 <td>租金:</td> 129 <td> 130 <input type="text" id="zj" /> 131 </td> 132 </tr> 133 <tr> 134 <td>使用地點:</td> 135 <td> 136 <input type="text" id="address" /> 137 </td> 138 </tr> 139 <tr> 140 <td>所屬學院:</td> 141 <td> 142 <input id="Checkbox1" type="checkbox" name="cool" value="物聯網"/>物聯網 143 <input id="Checkbox2" type="checkbox" name="cool" value="軟工" />軟工 144 <input id="Checkbox3" type="checkbox" name="cool" value="雲計算" />雲計算 145 </td> 146 </tr> 147 <tr> 148 <td></td> 149 <td> 150 <input type="button" value="保存" id="button1" onclick="server()"/> 151 <input type="button" value="取消" id="button2" onclick="clear()" /> 152 </td> 153 </tr> 154 </table> 155 </div> 156 <div> 157 <table id="table2" border="1" cellspacing="0"> 158 <tr style="background-color:#0a258d;width:450px;height:30px"> 159 <td>資產名稱:</td> 160 <td>類別:</td> 161 <td>合同號:</td> 162 <td>租出單位:</td> 163 <td>所屬學院:</td> 164 <td>操作:</td> 165 </tr> 166 </table> 167 </div> 168 </div> 169 </body> 170 </html>
一個簡單的資產管理表