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>

      每个删除都包含在一个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>
		
	<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>

效果

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