vto*_*ola 53 html webforms html-table web-standards
我正在尝试创建一个表格,其中每一行都是一个表格.我希望每个输入都在不同的表格中,但我仍然需要它,例如,所有第一个输入都属于同一个表头,依此类推.
我要做的是一个可编辑的网格,或多或少这个:
<table>
<tr>
<form method="GET" action="whatever">
<td><input type="text"/></td>
<td><input type="text"/></td>
</form>
</tr>
<tr>
<form method="GET" action="whatever">
<td><input type="text"/></td>
<td><input type="text"/></td>
</form>
</tr>
</table>
但显然我无法以这种方式安排标签(或者w3c验证器所说的那样).
有什么好办法吗？
Mat*_*hew 88
如果你想要一个"编辑网格",即像结构的表格,可以让你做任何行的形式,使用CSS模仿表标签的布局:display:table,display:table-row,和display:table-cell.
无需将整个表包装在表单中,也无需为表的每个明显行创建单独的表单和表.
试试这个:
<style>
DIV.table
{
display:table;
}
FORM.tr, DIV.tr
{
display:table-row;
}
SPAN.td
{
display:table-cell;
}
</style>
...
<div class="table">
<form class="tr" method="post" action="blah.html">
<span class="td"><input type="text"/></span>
<span class="td"><input type="text"/></span>
</form>
<div class="tr">
<span class="td">(cell data)</span>
<span class="td">(cell data)</span>
</div>
...
</div>
将整个TABLE包装在FORM中的问题是任何和所有表单元素都将在提交时发送(可能是期望但可能不是).此方法允许您为每个"行"定义表单,并仅在提交时发送该行数据.
将FORM标记包裹在TR标记(或围绕FORM的TR)周围的问题是它是无效的HTML.FORM仍然允许像往常一样提交,但此时DOM已被破坏.注意:尝试使用JavaScript获取FORM或TR的子元素,这可能会导致意外结果.
请注意,IE7不支持这些CSS表格样式,IE8需要doctype声明才能使其进入"标准"模式:(试试这个或类似的东西)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
任何其他支持display的浏览器:table,display:table-row和display:table-cell应该显示你的css数据表,就像你使用TABLE,TR和TD标签一样.大多数人都这样做.
请注意,你也可以模仿THEAD,TBODY,通过包装与另一个DIV你行组TFOOT display: table-header-group,table-row-group和table-footer-group分别.
注意:这个方法唯一不能做的就是colspan.
看看这个例子:http://jsfiddle.net/ZRQPP/
Sea*_*ira 12
如果所有这些行都是相关的,您需要更改表格数据...为什么不将整个表格包装在一个表格中,然后更改GET为POST(除非您知道您不会发送超过最大金额的数据GET请求可以发送的数据).
(当然,这是假设所有数据都在同一个地方.)
<form method="POST" action="your_action">
<table>
<tr>
<td><input type="text" name="r1c1" value="" /></td>
<!-- ... snip ... -->
</tr>
<!-- ... repeat as needed ... -->
</table>
</form>
您可能遇到列宽问题,但可以明确设置.
<table>
<tr>
<td>
<form>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td>
<form>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
您可能还想考虑将其作为单个表单,然后使用jQuery从所需的行中选择表单元素,将其序列化并将其作为表单提交.
请参阅:http://api.jquery.com/serialize/
此外,还有一些非常好的网格插件:http://www.google.com/search？ q = jquery + grid&ie = utf-8 = oe = -8 = aq = t&rls = org.mozilla:en-US:official&client =火狐-A
如果使用JavaScript是一个选项,并且您希望避免嵌套表,请包含jQuery并尝试以下方法.
首先,您必须为每一行提供一个唯一的ID,如下所示:
<table>
<tr id="idrow1"><td> ADD AS MANY COLUMNS AS YOU LIKE </td><td><button onclick="submitRowAsForm('idrow1')">SUBMIT ROW1</button></td></tr>
<tr id="idrow2"><td> PUT INPUT FIELDS IN THE COLUMNS </td><td><button onclick="submitRowAsForm('idrow2')">SUBMIT ROW2</button></td></tr>
<tr id="idrow3"><td>ADD MORE THAN ONE INPUT PER COLUMN</td><td><button onclick="submitRowAsForm('idrow3')">SUBMIT ROW3</button></td></tr>
</table>
然后,在您的页面的JavaScript中包含以下功能.
<script>
function submitRowAsForm(idRow) {
form = document.createElement("form"); // CREATE A NEW FORM TO DUMP ELEMENTS INTO FOR SUBMISSION
form.method = "post"; // CHOOSE FORM SUBMISSION METHOD, "GET" OR "POST"
form.action = ""; // TELL THE FORM WHAT PAGE TO SUBMIT TO
$("#"+idRow+" td").children().each(function() { // GRAB ALL CHILD ELEMENTS OF <TD>'S IN THE ROW IDENTIFIED BY idRow, CLONE THEM, AND DUMP THEM IN OUR FORM
if(this.type.substring(0,6) == "select") { // JQUERY DOESN'T CLONE <SELECT> ELEMENTS PROPERLY, SO HANDLE THAT
input = document.createElement("input"); // CREATE AN ELEMENT TO COPY VALUES TO
input.type = "hidden";
input.name = this.name; // GIVE ELEMENT SAME NAME AS THE <SELECT>
input.value = this.value; // ASSIGN THE VALUE FROM THE <SELECT>
form.appendChild(input);
} else { // IF IT'S NOT A SELECT ELEMENT, JUST CLONE IT.
$(this).clone().appendTo(form);
}
});
form.submit(); // NOW SUBMIT THE FORM THAT WE'VE JUST CREATED AND POPULATED
}
</script>
那我们在这做了什么？我们为每一行赋予了一个唯一的id,并在行中包含了一个元素,可以触发该行的唯一标识符的提交.激活提交元素后,将动态创建和设置新表单.然后使用jQuery,我们克隆<td>我们传递的行的's'中包含的所有元素,并将克隆附加到动态创建的表单中.最后,我们提交了表格.
您可以使用该form属性id将表单跨越多个元素，每个元素都使用form具有表单名称的属性，如下所示：
<table>
<tr>
<td>
<form method="POST" id="form-1" action="/submit/form-1"></form>
<input name="a" form="form-1">
</td>
<td><input name="b" form="form-1"></td>
<td><input name="c" form="form-1"></td>
<td><input type="submit" form="form-1"></td>
</tr>
</table>
小智 5
如果每个中都需要forminsidetr和s ，则可以添加in标签，并将包含标签 id 的属性“form”添加到 Outside s 中。像这样的东西：inputtdformtdforminput
<tr>
<td>
<form id='f1'>
<input type="text">
</form>
</td>
<td>
<input form='f1' type="text">
</td>
</tr>