HTML:是否有可能以XHTML有效方式在每个TABLE ROW中都有一个FORM标记?


78

我可以最好地描述如下:

我想要这个(在整个表中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>标签?


3
将整个表格包装在一个表单标签中(然后提交整个内容),或者将您的HTML表格变成一个类似结构的表格,其中每个“行”都是一个表格。看到这里:stackoverflow.com/a/15600151/1038812
马修(Matthew)

1
参见Alexx Roche的答案。我认为他应该是公认的答案。他的回答确实解决了这个问题。
Fandi Susanto 2014年

1
就我而言,Alexx Roche的回答并不是最好的,我实际上是在显示表格信息。
adg 2013年

Answers:


42

你不能 您唯一的选择是将其分为多个表,然后将form标记放在表之外。您可能最终嵌套了表格,但是不建议这样做:

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

我将完全删除表格,并用divs和spans等样式化的html元素替换它。


3
同意不要使用表格,使用标签,表单元素和CSS来对齐它们。请参阅网站optimization.com/speed/tweak/forms
Dan Diplo,2009年

我担心那不可能... grrr。不过
罗普斯塔(Ropstah)

65
请,默认情况下不要“忌食”。在很多情况下,数据必须以表格形式显示,其中也可能需要表格。我目前正面临其中一种情况。最后,您最终将使用不同的标签来模仿表语法……
Pere

85

值得一提的是,在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中不起作用。


1
不幸的是,IEEdge均不支持此功能:caniuse.com/#feat=form-attribute
Johannes Rudolph

13
对于我们中那些不该死的人来说,这是一个足够好的答案
hocikto 18-10-30

1
我只是注意到,一个非常老的管理表单(我们每天使用)不正确地嵌套了表格表单,并且它们今天停止在Chrome和Firefox的开发人员版本中工作。我将其移动</form>到与开始标记匹配的位置,并将“ form”属性添加到所有与输入相关的字段中,基于行的表单立即开始正常工作。我检查了一下,Edge / IEMobile是唯一不支持此功能的浏览器。Microsoft最近宣布他们正在采用Chromium,因此将来这可能不是一个大问题。
詹姆斯·莫伯格

63

我有一个类似的问题,这个问题HTML中:表格表格?为我解决了。(不确定是否为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>

3
这获得了我的投票-非常干净的解决方案(并经过验证的工作原理)!
惠特利

3

我想说可以,尽管它不会验证并且Firefox会重新排列代码(因此,使用Web Developer时在“查看生成的源代码”中看到的内容可能会令人惊讶)。我不是专家,但是放

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

就在

<tr>

然后使用

</tr></form>

最后一行肯定提供了功能(在Firefox,Chrome和IE7-9中经过测试)。为我工作,即使它产生的验证错误的数量是新的个人最佳/最差!没有问题的结果,并且我有一个样式表很重。我猜您可能像我一样有一个动态生成的表,这就是为什么解析表行对我们凡人来说并不明显。因此,基本上,在行的开头打开表单,然后在行的末尾将其关闭。


1

您只需将<form ... >标签放在标签之前,然后将<table>标签</form>放在末尾。

Hopte帮助。


3
这将不起作用,因为每个表格行都有相同名称的表单元素...
Ropstah,2009年

2
实际上,它可以正常工作-将行号附加到每个项目,例如'r1_name',然后在下一行'r2_name'上,很容易在服务器上解析()这些内容
monk.e.boy 2011年

10
在许多情况下,它可以正常工作,但是如果您的表有1000行,那么当您只想更新一行时,您可能就不想提交全部内容。
麦克

1

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

我将点击处理程序附加到每行的“更新”锚点上,这将触发同一行中字段的收集和“提交”。通过data-actionanchor标签上的可选属性,可以指定POST的目标URL。

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


0

实际上,我在表格的每一行上都有一个带有javascript(实际上是jquery)的表单的问题:

就像Lothre1所说的那样,“在呈现过程中,某些浏览器会在声明将输入保留在元素之外之后立即关闭form标签”。

这使我的输入字段超出了表单,因此无法使用JAVASCRIPT通过DOM访问表单的子级。

通常,以下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'参数遍历DOM可以解决此特定问题)

肮脏的解决方案是(对于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数据,就像已将表单发送给他一样(来自post [1] = 1的appart,但是要实现此解决方案,我建议改为处理data_str的尾部“&”) 。

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


1
这更多的是评论,而不是答案……尤其是因为您不解释如何$('#tr_id :input').each(function(){/*action*/});解决问题。
Ben D

好吧,我已经编辑了消息以详细说明jquery的不同属性,但是我认为这不仅仅是注释:javascript是即使POST数据将被发送到服务器,但也不尊重DOM层次结构的原因之一。 。
雷纳

您已经解决了如何input通过Javascript访问s的问题,但这从来都不是问题……问题是OP希望表的每一行都是可提交的形式。您的帖子未回答该问题。您可以通过显示如何使用JQuery / javascript提交表的离散块将其转换为答案(例如,让submit每一行上的按钮从其父元素上的元素中获取值tr,然后将这些值传递到AJAX中)发布)。还有其他的方法来做到这一点,你需要证明它是如何解决的OP的问题
本·d

0

我参加聚会很晚,但是这对我来说非常有用,并且代码应该能够自我解释;

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

@pbalaga:请参阅编辑历史记录,但是由于已对其进行编辑,因此注释确实过时了,因此我将其删除。
t0mppa 2014年

-1

如果您尝试添加扭曲tr元素的表单,如下所示

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

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

像这样的东西

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

此问题对于变形多个表单元格仍然有效

正如上面所说的,嵌套表是一种可能的解决方案,不建议使用。避免使用表格。


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

1
您好,欢迎来到S / O-感谢您的积极贡献!:)请考虑扩大您的答案。提供围绕答案的上下文,而不只是代码。还值得注意的是,2009年有人问过这个问题:) 我如何写一个好的答案?非常值得一读!
CmdrSharp
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.