在一个form表单中实现多个submit不同的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

猜你喜欢
