HTML: Охват формы через несколько td столбцов
CTRL + F5 (Запускаются, Не Отлаживая)
CTRL + SHIFT + B (Решение для Сборки)
6 ответов
Один из вариантов - объединить столбцы с 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.
Я бы проголосовал за неприятный Javascript. Это позволило бы сохранить макет как есть.
Одним из решений было бы создание нескольких столбцов в DIV вместо таблиц.
Используйте дизайн без таблиц с Div и CSS.
Например,
<html>
<head>
<style type="text/css">
#wrapper
{
width: 600px;
}
#header
{
width: 600px;
height:30px;
}
#person
{
clear:both;
width:600px; }
.name
{
clear:both;
width: 200px;
float: left;
text-align: center;
}
.color
{
width: 200px;
float: left;
text-align: center;
}
.submit
{
width: 200px;
float: left;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="name">
<b>Name</b></div>
<div class="color">
<b>Favorite Color</b></div>
</div>
<div id="Person">
<form action="/updatePerson" method="post">
<div class="name">
<input name="name" value="John" /></div>
<div class="color">
<input name="favorite_color" value="Green" /></div>
<div class="submit">
<input type="submit" value="Edit Person" /></div>
</form>
</div>
</div>
</body>
</html>
Нет, такой формы нет. Но во многих браузерах ваше использование работает так, как вы ожидали, за исключением случаев, когда вы динамически создаете элементы DOM с такой структурой в FireFox.
Может быть, вы можете выбросить тег
Вы можете
a) объединить всю строку таблицы в одну форму и обработать ее одним серверным скриптом.
или
б) установить form.action с помощью javascript.