Question

我可以最好地描述如下：

我想要这个（editmode中的整个表格以及每行中的保存按钮）。

<table>
    <tr>
        <td>Id</td>
        <td>Name</td>
        <td>Description</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><input type="hidden" name="id" value="1" /></td>
        <td><input type="text" name="name" value="Name" /></td>
        <td><input type="text" name="description" value="Description" /></td>
        <td><input type="submit" value="Save" /></td>
    </tr>
    <tr>
        <td><input type="hidden" name="id" value="2" /></td>
        <td><input type="text" name="name" value="Name2" /></td>
        <td><input type="text" name="description" value="Description2" /></td>
        <td><input type="submit" value="Save" /></td>
    </tr>
    <!-- and more rows here ... -->
</table>

我应该在哪里放置<form>标签？

Answer 1

值得一提的是，在HTML5中可以使用输入元素的“form”属性：

<table>
    <tr>
        <td>Id</td>
        <td>Name</td>
        <td>Description</td>
        <td>&nbsp;</td>
    </tr>
    <tr>
        <td><form id="form1"><input type="hidden" name="id" value="1" /></form></td>
        <td><input form="form1" type="text" name="name" value="Name" /></td>
        <td><input form="form1" type="text" name="description" value="Description" /></td>
        <td><input form="form1" type="submit" value="Save" /></td>
    </tr>
    <tr>
        <td><form id="form2"><input type="hidden" name="id" value="1" /></form></td>
        <td><input form="form2" type="text" name="name" value="Name" /></td>
        <td><input form="form2" type="text" name="description" value="Description" /></td>
        <td><input form="form2" type="submit" value="Save" /></td>
    </tr>
</table>

虽然缺少JS并使用原始元素，但不幸的是，这在IE10中无效。

Answer 2

我有一个类似的问题，问题this answer HTML: table of forms?为我解决了这个问题。（不确定它是否是XHTML，但它可以在HTML5浏览器中运行。）

您可以使用css为其他元素提供表格布局。

.table { display: table; } 
.table>* { display: table-row; }
.table>*>* { display: table-cell; }

然后使用以下有效的html。

<div class="table"> 
    <form>
        <div>snake<input type="hidden" name="cartitem" value="55"></div>
        <div><input name="count" value="4" /></div>
    </form>
</div>

Answer 3

你做不到。您唯一的选择是将其分成多个表并将表单标记放在其外部。您最终可能会嵌套表格，但不建议这样做：

<table>
  <tr><td><form>
    <table><tr><td>id</td><td>name</td>...</tr></table>
  </form></td></tr>
</table>

我会完全删除表格，并将其替换为样式化的html元素，如div和span。

Answer 4

您只需将<form ... >标记放在<table>标记之前，将</form>放在最后。

跳跃它有帮助。

Answer 5

我说你可以，虽然它没有验证，Firefox会重新安排代码（所以你在＆＃39;查看生成的源代码中看到的内容＆＃39;使用Web Developer时很可能惊喜）。我不是专家，而是

<form action="someexecpage.php" method="post">

就在

之前

<tr>

然后使用

</tr></form>

在行的末尾肯定提供功能（在Firefox，Chrome和IE7-9中测试）。为我工作，即使它产生的验证错误的数量是一个新的个人最好/最差！没有看到任何问题，我有一个相当重的风格的表。我想你可能有一个动态生成的表，就像我一样，这就是为什么解析表行对我们凡人来说有点不明显。所以基本上，在行的开头打开表单，然后在行结束后关闭它。

Answer 6

@wmantly的答案基本上与我现在要说的相同。根本不要使用<form>标签，并防止“不适当的”标签嵌套。使用javascript（在本例中为jQuery）进行数据发布，大多数情况下，您将使用javascript进行发布，因为只需要更新一行，并且必须在不刷新整个页面的情况下提供反馈（如果刷新整个页面，则是没必要浏览所有这些小腿，只张贴一行。

我将点击处理程序附加到每行的“更新”锚点上，这将触发同一行中字段的收集和“提交”。通过在定位标记上使用可选的data-action属性，可以指定POST的目标网址。

示例html

<table>
    <tbody>
        <tr>
            <td><input type="hidden" name="id" value="row1"/><input name="textfield" type="text" value="input1" /></td>
            <td><select name="selectfield">
                <option selected value="select1-option1">select1-option1</option>
                <option value="select1-option2">select1-option2</option>
                <option value="select1-option3">select1-option3</option>
            </select></td>
            <td><a class="submit" href="#" data-action="/exampleurl">Update</a></td>
        </tr>
        <tr>
            <td><input type="hidden" name="id" value="row2"/><input name="textfield" type="text" value="input2" /></td>
            <td><select name="selectfield">
                <option selected value="select2-option1">select2-option1</option>
                <option value="select2-option2">select2-option2</option>
                <option value="select2-option3">select2-option3</option>
            </select></td>
            <td><a class="submit" href="#" data-action="/different-url">Update</a></td>
        </tr>
        <tr>
            <td><input type="hidden" name="id" value="row3"/><input name="textfield" type="text" value="input3" /></td>
            <td><select name="selectfield">
                <option selected value="select3-option1">select3-option1</option>
                <option value="select3-option2">select3-option2</option>
                <option value="select3-option3">select3-option3</option>
            </select></td>
            <td><a class="submit" href="#">Update</a></td>
        </tr>
    </tbody>
</table>

示例脚本

    $(document).ready(function(){
        $(".submit").on("click", function(event){
            event.preventDefault();
            var url = ($(this).data("action") === "undefined" ? "/" : $(this).data("action"));
            var row = $(this).parents("tr").first();
            var data = row.find("input, select, radio").serialize();
            $.post(url, data, function(result){ console.log(result); });
        });
    });

一个JSFIddle

Answer 7

如果您尝试添加一个扭曲像这样的元素的表单

<table>
<form>
<tr>
<td><input type="text"/></td>
<td><input type="submit"/></td>
</tr>
</form>
</table>

渲染过程中的某些浏览器会在声明后立即关闭表单标记，将输入留在元素之外

类似这样的事情

<table>
    <form></form>
    <tr>
    <td><input type="text"/></td>
    <td><input type="submit"/></td>
    </tr>
    </table>

此问题对于扭曲多个表格单元格仍然有效

正如stereoscott所述，嵌套表是一种可行的解决方案，不推荐使用。避免使用表格。

Answer 8

事实上，我在表格的每一行都有一个表格的问题，使用javascript（实际上是jquery）：

像Lothre1所说的那样，“渲染过程中的某些浏览器会在声明之后立即关闭表单标记，而不会在元素之外留下输入”

这使我的输入字段OUTSIDE表单，因此我无法通过DOM使用JAVASCRIPT访问我的表单的子项。

通常，以下JQUERY代码不起作用：

$('#id_form :input').each(function(){/*action*/});
// this is supposed to select all inputS 
// within the form that has an id ='id_form'

但上述例子不适用于呈现的HTML：

<table>
    <form id="id_form"></form>
    <tr id="tr_id">
    <td><input type="text"/></td>
    <td><input type="submit"/></td>
    </tr>
    </table>

我仍然在寻找一个干净的解决方案（尽管使用TR'id'参数来解决这个问题）

脏解决方案（对于jquery）：

$('#tr_id :input').each(function(){/*action*/});
// this will select all the inputS
// fields within the TR with the id='tr_id'

上面的例子会起作用，但它并不是真的“干净”，因为它指的是TR而不是FORM，它需要AJAX ......

编辑：使用jquery / ajax的完整过程将是：

//init data string
// the dummy init value (1=1)is just here 
// to avoid dealing with trailing &
// and should not be implemented
// (though it works)
var data_str = '1=1'; 
// for each input in the TR
$('#tr_id :input').each(function(){

 //retrieve field name and value from the DOM
 var field = $(this).attr('name');
 var value = $(this).val();

 //iterate the string to pass the datas
 // so in the end it will render s/g like
 // "1=1&field1_name=value1&field2_name=value2"...
 data_str += '&' + field + '=' + value; 


});

//Sendind fields datawith ajax 
// to be treated 
$.ajax({
 type:"POST",
 url: "target_for_the_form_treatment",
 data:data_string,
 success:function(msg){
    /*actions on success of the request*/
 });
});

这样，“target_for_the_form_treatment”应该接收POST数据，好像表格是发送给他的一样（appart来自帖子[1] = 1，但为了实现这个解决方案我会建议处理尾随'＆amp;'的而不是data_str。

我仍然不喜欢这个解决方案，但由于dataTables jquery插件，我被迫使用TABLE结构......

Answer 9

我迟到了，但这对我很有用，代码应该解释自己;

<script type="text/javascript">
    function formAJAX(btn){
        var $form = $(btn).closest('[action]');
        var str = $form.find('[name]').serialize();
        $.post($form.attr('action'), str, function(data){
            //do stuff
        });
    }
<script>

HTML：

<tr action="scriptURL.php">
    <td>
        Field 1:<input type="text" name="field1"/>
    </td>
    <td>
        Field 2:<input type="text" name="field2" />
    </td>
    <td><button type="button" onclick="formAJAX(this)">Update</button></td>
</tr>

Answer 10

<table > 
<thead > 
   <tr>
    <th>No</th><th>ID</th><th>Name</th><th>Ip</th><th>Save</th> 
   </tr>
</thead>
<tbody id="table_data"> 
         <tr>
            <td> 
                <form method="POST" autocomplete="off" id="myForm_207" action="save.php">
                    <input type="hidden" name="pvm" value="207"> 
                    <input type="hidden" name="customer_records_id" value="2"> 
                    <input type="hidden" name="name_207" id="name_207" value="BURÇİN MERYEM ONUK"> 
                    <input type="hidden" name="ip_207" id="ip_207" value="89.19.24.118"> 

                </form> 
                1 
            </td> 
            <td> 
                207 
            </td> 
            <td> 
                <input type="text" id="nameg_207" value="BURÇİN MERYEM ONUK"> 
            </td> 
            <td> 
                <input type="text" id="ipg_207" value="89.19.24.118"> 
            </td> 
            <td>
                <button type="button" name="Kaydet_207" class="searchButton" onclick="postData('myForm_207','207')">SAVE</button>
            </td>
        </tr> 
        <tr>
            <td> 
                <form method="POST" autocomplete="off" id="myForm_209" action="save.php">
                    <input type="hidden" name="pvm" value="209"> 
                    <input type="hidden" name="customer_records_id" value="2"> 
                    <input type="hidden" name="name_209" id="name_209" value="BALA BAŞAK KAN"> 
                    <input type="hidden" name="ip_209" id="ip_209" value="217.17.159.22"> 
                </form> 
                2 
            </td> 
            <td> 
                209 
            </td> 
            <td> 
                <input type="text" id="nameg_209" value="BALA BAŞAK KAN"> 
            </td> 
            <td> 
                <input type="text" id="ipg_209" value="217.17.159.22"> 
            </td> 
            <td>
                <button type="button" name="Kaydet_209" class="searchButton" onclick="postData('myForm_209','209')">SAVE</button>
            </td>
        </tr> 
</tbody> 
</table> 
<script> 
function postData(formId,keyy){ 
    //alert(document.getElementById(formId).length);
    //alert(document.getElementById('name_'+keyy).value);
    document.getElementById('name_'+keyy).value=document.getElementById('nameg_'+keyy).value;
    document.getElementById('ip_'+keyy).value=document.getElementById('ipg_'+keyy).value;

    //alert(document.getElementById('name_'+keyy).value);
    document.getElementById(formId).submit(); 
}
</script>

HTML：是否可以在每个TABLE ROW中以XHTML有效的方式使用FORM标记？

10 个答案: