我想在
HTML中做这样的事情.它不是有效的HTML,但意图是:
<table> <tr> <th>Name</th> <th>Favorite Color</th> <th> </th> <th> </th> </tr> <tr> <form action="/updatePerson" method="post"> <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> <td><input name="name" value="John"/></td> <td><input name="favorite_color" value="Green"/></td> <td><input type="submit" value="Edit Person"/></td> </form> <td> <form action="deletePerson" method="post"> <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> <input type="submit" value="Delete Person"/> </form> </td> </tr> <tr> <form action="/updatePerson" method="post"> <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/> <td><input name="name" value="Sally"/></td> <td><input name="favorite_color" value="Blue"/></td> <td><input type="submit" value="Edit Person"/></td> </form> <td> <form action="deletePerson" method="post"> <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/> <input type="submit" value="Delete Person"/> </form> </td> </tr> </table>
显然,我不能这样做,因为我不能在< tr>之内立即有一个表单标签.元件.我可以看到的唯一选择是使用恶作剧或更改我的程序的行为.
什么可能是一个解决方案,让我有一个这样的跨多个列的表单?
解决方法
一个选项是将列与colspans组合,如下所示:
<table> <tr> <th> Name </th> <th> Favorite Color </th> <th> </th> <th> </th> </tr> <tr> <td colspan="4"> <form action="/updatePerson" method="post"> <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> <input name="name" value="John"/> <input name="favorite_color" value="Green"/> <input type="submit" value="Edit Person"/> </form> <form action="deletePerson" method="post"> <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> <input type="submit" value="Delete Person"/> </form> </td> </tr> <tr> <td colspan="4"> <form action="/updatePerson" method="post"> <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/> <input name="name" value="Sally"/> <input name="favorite_color" value="Blue"/> <input type="submit" value="Edit Person"/> </form> <form action="deletePerson" method="post"> <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/> <input type="submit" value="Delete Person"/> </form> </td> </tr> </table>
并使用CSS对表单元素的布局进行样式化.或者您可以使用纯DIV的布局.