JS提交表单form

<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表单中，即每一行数据就会有一个表单，会导致前端显示的样式变形，如下图，

将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>
		<!--写在往外面的form表单代码-->
	<div>
		<form id="deleteEmpForm"  method="post">
			<input type="hidden" name="_method" value="delete"/>
		</form>
	</div>
	
	<!--JS提交form表单代码-->
<script>
	$(".deleteBtn").click(function(){
	    //删除当前员工的
	$("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();
	    return false;
      });
</script>

效果

这样就是用JS提交form表单且显示的样式不违和