HTML：是否可以以 XHTML 有效方式在每个 TABLE ROW 中包含一个 FORM 标记？

Question

提问by Ropstah

I can best describe this as follows:

我可以最好地描述如下：

I want this (entire table in editmodeand save button in every row).

我想要这个（整个表格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>

Where should I put the <form>tags?

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

Answer 1

采纳答案by stereoscott

You can't. Your only option is to divide this into multiple tables and put the form tag outside of it. You could end up nesting your tables, but this is not recommended:

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

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

I would remove the tables entirely and replace it with styled html elements like divs and spans.

我会完全删除表格，并用样式化的 html 元素（如 div 和 span）替换它。

Answer 2

回答by tjbp

It's worth mentioning that this is possible in HTML5, using the "form" attribute for input elements:

值得一提的是，这在 HTML5 中是可能的，使用 input 元素的“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>

While clean in its lack of JS and use of original elements, unfortunately this isn't working in IE10.

虽然在缺乏 JS 和使用原始元素方面很干净，但不幸的是这在 IE10 中不起作用。

Answer 3

回答by Alexx Roche

I had a similar question and this answerin question HTML: table of forms?solved it for me. (Not sure if it is XHTML, but it works in an HTML5 browser.)

我有一个类似的问题，这个答案是HTML: table of forms? 为我解决了。（不确定它是否是 XHTML，但它适用于 HTML5 浏览器。）

You can use css to give table layout to other elements.

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

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

Then you use the following valid html.

然后您使用以下有效的 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 4

回答by Geoff Kendall

I'd say you can, although it doesn't validate and Firefox will re-arrange the code (so what you see in 'View generated source' when using Web Developer may well surprise). I'm no expert, but putting

我会说你可以，虽然它没有验证并且 Firefox 会重新排列代码（所以你在使用 Web Developer 时在“查看生成的源代码”中看到的内容可能会令人惊讶）。我不是专家，但把

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

just ahead of the

就在

<tr>

and then using

然后使用

</tr></form>

at the end of the row certainly gives the functionality (tested in Firefox, Chrome and IE7-9). Working for me, even if the number of validation errors it produced was a new personal best/worst! No problems seen as a consequence, and I have a fairly heavily styled table. I guess you may have a dynamically produced table, as I do, which is why parsing the table rows is a bit non-obvious for us mortals. So basically, open the form at the beginning of the row and close it just after the end of the row.

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

Answer 5

回答by Timothée Martin

You just have to put the <form ... >tag before the <table>tag and the </form>at the end.

你只需要把<form ... >标签放在标签之前<table>和</form>最后。

Hopte it helps.

希望它有帮助。

Answer 6

回答by wmantly

Im late to the party, but this worked great for me and the code should explain itself;

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

<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:

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 7

回答by renard

In fact I have the problem with a form on each row of a table, with javascript (actually jquery) :

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

like Lothre1 said, "some browsers in the process of rendering will close form tag right after the declaration leaving inputs outside of the element"

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

which makes my input fields OUTSIDE the form, therefore I can't access the children of my form through the DOM with JAVASCRIPT..

这使我的输入字段在表单之外，因此我无法通过带有 JAVASCRIPT 的 DOM 访问表单的子项..

typically, the following JQUERY code won't work :

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

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

BUT the above exemple doesn't work with the rendered HTML :

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

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

I'm still looking for a clean solution (though using the TR 'id' parameter to walk the DOM would fix this specific problem)

我仍在寻找一个干净的解决方案（尽管使用 TR 'id' 参数来遍历 DOM 可以解决这个特定问题）

dirty solution would be (for jquery):

肮脏的解决方案是（对于 jquery）：

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

the above exemple will work, but it's not really "clean", because it refers to the TR instead of the FORM, AND it requires AJAX ...

上面的例子可以工作，但它并不是真正“干净”，因为它指的是 TR 而不是 FORM，并且它需要 AJAX ...

EDIT : complete process with jquery/ajax would be :

编辑：使用 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*/
 });
});

this way, the "target_for_the_form_treatment" should receive POST data as if a form was sent to him (appart from the post[1] = 1, but to implement this solution i would recommand dealing with the trailing '&' of the data_str instead).

这样，“target_for_the_form_treatment”应该接收 POST 数据，就好像向他发送了一个表单一样（来自 post[1] = 1，但要实现这个解决方案，我会建议处理 data_str 的尾随 '&' 代替） .

still I don't like this solution, but I'm forced to use TABLE structure because of the dataTables jquery plugin...

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

Answer 8

回答by ay?en Dursun

<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>

Answer 9

回答by Lothre1

If you try to add a form warping a tr element like this

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

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

some browsers in the process of rendering will close form tag right after the declaration leaving inputs outside of the element

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

something like this

像这样的东西

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

This issue is still valid for warping multiple table cells

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

As stereoscott said above, nesting tables are a possible solution which is not recommended. Avoid using tables.

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

HTML：是否可以以 XHTML 有效方式在每个 TABLE ROW 中包含一个 FORM 标记？

提问by Ropstah

采纳答案by stereoscott

回答by tjbp

回答by Alexx Roche

回答by Geoff Kendall

回答by Timothée Martin

回答by wmantly

回答by renard

回答by ay?en Dursun

回答by Lothre1

相关推荐

最近更新

标签

HTML：是否可以以 XHTML 有效方式在每个 TABLE ROW 中包含一个 FORM 标记？

提问by Ropstah

采纳答案by stereoscott

回答by tjbp

回答by Alexx Roche

回答by Geoff Kendall

回答by Timothée Martin

回答by wmantly

回答by renard

回答by ay?en Dursun

回答by Lothre1

相关推荐

Html 调整单选按钮大小

Html 如何强制完全下载链接上的txt文件？

HTML 中的树状选择

Html VBA中电子邮件正文的字体样式

相关推荐

最近更新

标签