JS提交表单form

红太狼 2024-04-17 22:32 76阅读 0赞

<table class="table table-striped table-sm">
        <tbody>
        	<tr th:each="emp:${emps}">
        		<td th:text="${emp.id}"></td>
        		<td>[[${emp.lastName}]]</td>
        		<td th:text="${emp.email}"></td>
        		<td th:text="${emp.gender}==0?'女':'男'"></td>
        		<td th:text="${emp.department.departmentName}"></td>
        		<td th:text="${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}"></td>
        		<td>
        			<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>
        			<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
        		</td>
           
        		<td>
        			<form th:action="@{/emp/}+${emp.id}" method="post">
        			<input type="hidden" name="_method" value="delete">
        			<button type="submit" class="btn btn-sm btn-danger">删除</button>
        			</form>
        		</td>
        	</tr>
        </tbody>
     </table>

每个`<button type="submit" class="btn btn-sm btn-danger">删除</button>`都包含在一个form表单中，即每一行数据就会有一个表单，会导致前端显示的样式变形，如下图，  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70]  
将form表单的代码写在外面并用JS来进行提交，减少重复生成form，如下：

<table class="table table-striped table-sm">
     <tbody>
       <tr th:each="emp:${emps}">
    	
    		
    		
    		<td>
    			<a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>
    			<button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>
    		</td>
    	</tr>
     </tbody>
     </table>
    </div>
    		
    	<div>
    		<form id="deleteEmpForm" method="post">
    			<input type="hidden" name="_method" value="delete"/>
    		</form>
    	</div>
    	
    	
    <script> $(".deleteBtn").click(function(){ //删除当前员工的 $("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit(); return false; }); </script>

#### 效果 ####

![在这里插入图片描述][20190902141113284.png]  
这样就是用JS提交form表单且显示的样式不违和

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RhcG9uaQ_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/33e6ff16c5be49338589bc7e5f4b73b5.png
[20190902141113284.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/76623ccee5ef43349862d98f3a696909.png