在一個form表單中實現多個submit不同的action
阿新 • • 發佈：2018-05-12
var ctype 編號 表單 顯示 col 格式 action 否則
在button中用JS的事件綁定onclick實現，如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>management</title> 6 7 <script type="text/javascript"> 8 //一個表單實現多submit按鈕不同URL請求 9 function toAdd() { 10 document.employees.action = "add.do"; 11 document.employees.submit(); 12 } 13 function toDelete(obj) { 14 var n = obj.parentNode.parentNode.rowIndex; 15 /* document.getElementById(‘myTable‘).deleteRow(n);*/ 16 document.employees.action = "delete.do"; 17 document.employees.submit(); 18 } 19 </script> 20 <style type="text/css"> 21 /*內容居中，表格寬度和高度，顯示邊框 */ 22 td, th { 23 text-align: center; 24 width: 80px; 25 height: 30px; 26 width: 80px; 27 border: 1px solid black; 28 } 29 30 /*表格自動居中 */ 31 table { 32 border-collapse: collapse; 33 margin: 0 auto; 34 } 35 /*輸入框設置為和信息框一樣的格式 */ 36 .input { 37 width: 80px; 38 height: 30px; 39 border: 0; 40 text-align: center; 41 } 42 </style> 43 44 </head> 45 <body> 46 <form method="post" name="employees"> 47 <!--table的id值 配合js可實現刪除表格的某一行 --> 48 <table id="myTable"> 49 <tr> 50 <th colspan="5">員工信息管理</th> 51 </tr> 52 <tr> 53 <td>編號</td> 54 <td>姓名</td> 55 <td>年齡</td> 56 <td>薪資</td> 57 <td>操作</td> 58 </tr> 59 <tr> 60 <td><input class="input" type="text" name="employee_ID"></td> 61 <td><input class="input" type="text" name="employee_Name"></td> 62 <td><input class="input" type="text" name="employee_Age"></td> 63 <td><input class="input" type="text" name="employee_Salary"></td> 64 65 <td></td> 66 </tr> 67 <tr> 68 <!--獲取員工信息，在表格中顯示出來，應用開始執行時要判斷非空，否則會拋空指針異常； 69 for循環遍歷在重定向後把ArrayList中的員工信息全部顯示出來。 70 --> 71 <% 72 if (myEmp != null) { 73 for (Employee emp : myEmp) { 74 %> 75 <td><%=emp.getEmNum()%></td> 76 <td><%=emp.getEmName()%></td> 77 <td><%=emp.getEmAge()%></td> 78 <td><%=emp.getEmSalary()%></td> 79 <td><button name="delSelect" value="<%=++empCount%>" 80 onclick="toDelete(this)">刪除</button></td> <!--實現員工存儲序號記錄以把值傳給servlet處理 --> 81 </tr> 82 <% 83 } 84 } 85 %> 86 <tr> 87 <td colspan="5"><input type="button" name="add" value="添加" 88 onclick="toAdd()" /></td> 89 </tr> 90 </table> 91 92 </form> 93 </body> 94 </html>
在一個form表單中實現多個submit不同的action