HTML: Ist es möglich, ein FORM-Tag in jeder TABLE ROW auf eine XHTML-gültige Weise zu haben?


78

Ich kann das am besten wie folgt beschreiben:

Ich möchte dies (gesamte Tabelle in editmodeund Speichern-Button in jeder Zeile).

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

Wo soll ich die <form>Tags platzieren?


3
Wickeln Sie Ihre gesamte Tabelle in einem Formular - Tag (und senden Sie die ganze Sache) oder schalten Sie Ihre HTML - Tabelle in eine Tabelle wie Struktur , wo jeder „Reihe“ ist eine Form ist. Siehe hier: stackoverflow.com/a/15600151/1038812
Matthew

1
Siehe Alexx Roche Antwort. Ich denke, seine sollte die akzeptierte Antwort sein. Seine Antwort löst das Problem wirklich.
Fandi Susanto

1
Die Antwort von Alexx Roche war in meinem Fall nicht die beste. Ich zeige tatsächlich tabellarische Informationen an.
Adg

Antworten:


42

Das kannst du nicht. Sie können dies nur in mehrere Tabellen aufteilen und das Formular-Tag außerhalb davon platzieren. Sie könnten am Ende Ihre Tabellen verschachteln, aber dies wird nicht empfohlen:

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

Ich würde die Tabellen vollständig entfernen und sie durch gestaltete HTML-Elemente wie divs und spans ersetzen.


3
Einverstanden, verwenden Sie keine Tabellen, verwenden Sie Beschriftungen und Formularelemente und CSS, um sie auszurichten. Siehe websiteoptimization.com/speed/tweak/forms
Dan Diplo

Ich hatte Angst, dass es nicht möglich sein würde ... grrr. Vielen Dank
Ropstah

65
Bitte seien Sie nicht standardmäßig "tablephobic". Es gibt viele Fälle, in denen Daten in Tabellenform angezeigt werden müssen, für die möglicherweise auch ein Formular erforderlich ist. Ich stehe derzeit vor einem dieser Fälle. Am Ende ahmen Sie die Tabellensyntax mit verschiedenen Tags nach ...
Pere

85

Es ist erwähnenswert, dass dies in HTML5 möglich ist, indem das Attribut "form" für Eingabeelemente verwendet wird:

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

Obwohl es an JS mangelt und Originalelemente verwendet, funktioniert dies in IE10 leider nicht.


1
Leider wird dies weder von IE noch von Edge unterstützt: caniuse.com/#feat=form-attribute
Johannes Rudolph

13
gut genug Antwort für diejenigen von uns, die sich nicht um dh oder Rand
kümmern

1
Mir ist gerade aufgefallen, dass ein extrem altes Administrationsformular (das wir täglich verwenden) nicht ordnungsgemäß verschachtelte Tabellenformulare enthält und heute in Entwicklerversionen von Chrome und Firefox nicht mehr funktioniert. Ich habe das so verschoben </form>, dass es mit dem Anfangstag übereinstimmt, und das Attribut "form" zu allen eingabebezogenen Feldern hinzugefügt, und die zeilenbasierten Formulare haben sofort richtig funktioniert. Ich habe überprüft und Edge / IEMobile sind die einzigen Browser, die dies nicht unterstützen. Microsoft hat kürzlich angekündigt, Chromium einzuführen, sodass dies in Zukunft möglicherweise kein großes Problem darstellt.
James Moberg

63

Ich hatte eine ähnliche Frage und diese Antwort in Frage HTML: Tabelle der Formulare? löste es für mich. (Nicht sicher, ob es sich um XHTML handelt, aber es funktioniert in einem HTML5-Browser.)

Sie können CSS verwenden, um anderen Elementen ein Tabellenlayout zu geben.

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

Dann verwenden Sie das folgende gültige 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
Dies bekommt meine Stimme - sehr saubere Lösung (und verifizierte Arbeit)!
Kwhitley

3

Ich würde sagen, dass Sie dies können, obwohl es nicht validiert wird und Firefox den Code neu anordnet (was Sie also unter "Generierte Quelle anzeigen" sehen, wenn Sie Web Developer verwenden, kann durchaus überraschen). Ich bin kein Experte, aber Putten

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

kurz vor dem

<tr>

und dann mit

</tr></form>

am Ende der Zeile gibt sicherlich die Funktionalität (getestet in Firefox, Chrome und IE7-9). Ich habe für mich gearbeitet, auch wenn die Anzahl der Validierungsfehler ein neues persönliches Best / Worst war! Keine Probleme als Folge gesehen, und ich habe einen ziemlich stark gestalteten Tisch. Ich denke, Sie haben möglicherweise eine dynamisch erzeugte Tabelle, wie ich es tue, weshalb das Parsen der Tabellenzeilen für uns Sterbliche etwas nicht offensichtlich ist. Öffnen Sie also im Grunde das Formular am Anfang der Zeile und schließen Sie es direkt nach dem Ende der Zeile.


1

Sie müssen nur das <form ... >Tag vor das <table>Tag und das </form>am Ende setzen.

Hoffentlich hilft es.


3
Dies wird nicht funktionieren, da es für jeden Tablerow Formularelemente mit demselben Namen gibt ...
Ropstah

2
Eigentlich würde es gut funktionieren - hängen Sie die Zeilennummer an jedes Element an, z. B. 'r1_name', und in der nächsten Zeile 'r2_name' ist es ziemlich einfach, diese auf dem Server zu analysieren ()
monk.e.boy

10
In vielen Fällen funktioniert es einwandfrei. Wenn Ihre Tabelle jedoch 1000 Zeilen enthält, möchten Sie wahrscheinlich nicht das gesamte Dokument senden, wenn Sie lediglich eine einzelne Zeile aktualisieren möchten.
Mike

1

Die Antwort von @wmantly ist im Grunde "die gleiche", wie ich sie in diesem Moment anstreben würde. Verwenden Sie überhaupt keine <form>Tags und verhindern Sie das Verschachteln von Tags. Verwenden Sie Javascript (in diesem Fall jQuery), um die Daten zu veröffentlichen. Meistens wird dies mit Javascript durchgeführt, da nur eine Zeile aktualisiert werden musste und Feedback gegeben werden muss, ohne die gesamte Seite zu aktualisieren (wenn die gesamte Seite aktualisiert wird, ist dies der Fall Es hat keinen Sinn, durch all diese Trobules zu gehen, um nur eine einzige Reihe zu veröffentlichen.

Ich hänge einen Klick-Handler an einen 'Update'-Anker in jeder Zeile an, der die Sammlung und das' Senden 'der Felder in derselben Zeile auslöst. Mit einem optionalen data-actionAttribut auf dem Ankertag kann die Ziel-URL des POST angegeben werden.

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

Beispielskript

    $(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); });
        });
    });

Ein JSFIddle


0

Tatsächlich habe ich das Problem mit einem Formular in jeder Zeile einer Tabelle mit Javascript (eigentlich jquery):

Wie Lothre1 sagte, "schließen einige Browser beim Rendern das Formular-Tag direkt nach der Deklaration und lassen Eingaben außerhalb des Elements."

Dadurch werden meine Eingabefelder AUSSERHALB des Formulars erstellt, sodass ich mit JAVASCRIPT nicht über das DOM auf die untergeordneten Elemente meines Formulars zugreifen kann.

Normalerweise funktioniert der folgende JQUERY-Code nicht:

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

ABER das obige Beispiel funktioniert nicht mit dem gerenderten HTML:

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

Ich bin immer noch auf der Suche nach einer sauberen Lösung (obwohl die Verwendung des Parameters TR 'id' zum Durchlaufen des DOM dieses spezielle Problem beheben würde)

schmutzige Lösung wäre (für jquery):

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

Das obige Beispiel wird funktionieren, aber es ist nicht wirklich "sauber", da es sich auf das TR anstelle des FORMULARS bezieht UND AJAX erfordert ...

EDIT: vollständiger Prozess mit jquery / ajax wäre:

//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*/
 });
});

Auf diese Weise sollte das "target_for_the_form_treatment" POST-Daten empfangen, als ob ein Formular an ihn gesendet worden wäre (Teil von der Post [1] = 1, aber um diese Lösung zu implementieren, würde ich empfehlen, stattdessen das nachfolgende '&' der data_str zu behandeln). .

Ich mag diese Lösung immer noch nicht, aber ich bin gezwungen, die TABLE-Struktur zu verwenden, weil das jTery-Plugin dataTables ...


1
Dies ist eher ein Kommentar als eine Antwort ... vor allem, weil Sie nicht erklären, wie $('#tr_id :input').each(function(){/*action*/});das Problem gelöst wird.
Ben D

Nun, ich habe die Nachricht bearbeitet, um die verschiedenen Proteste von jquery detailliert darzustellen, aber ich denke, dies ist mehr als ein Kommentar: Javascript ist einer der Gründe, warum die DOM-Hierarchie nicht beachtet wird, obwohl POST-Daten an den Server gesendet werden. .
renard

Sie haben die Frage gelöst, wie Sie inputüber Javascript auf die s zugreifen können, aber das war überhaupt nicht das Problem ... Das Problem ist, dass das OP möchte, dass jede Zeile einer Tabelle ein übermittelndes Formular ist. Ihr Beitrag beantwortet diese Frage nicht. Sie können es in eine Antwort konvertieren, indem Sie zeigen, wie Sie mit JQuery / Javascript diskrete Blöcke der Tabelle senden (indem Sie beispielsweise die submitSchaltfläche in jeder Zeile die Werte aus den Elementen auf dem übergeordneten Element abrufen trund diese Werte dann an eine AJAX übergeben Post). Es gibt andere Möglichkeiten, dies zu tun. Sie müssen zeigen, wie das Problem des OP
Ben D,

0

Ich bin zu spät zur Party, aber das hat bei mir großartig funktioniert und der Code sollte sich selbst erklären.

<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: Siehe Bearbeitungsverlauf, aber da er bearbeitet wurde, war der Kommentar tatsächlich veraltet, also habe ich ihn gelöscht.
t0mppa

-1

Wenn Sie versuchen, ein Formular hinzuzufügen, das ein tr-Element wie dieses verzerrt

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

Einige Browser, die gerade gerendert werden, schließen das Formular-Tag direkt nach der Deklaration und lassen Eingaben außerhalb des Elements

etwas wie das

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

Dieses Problem gilt weiterhin für das Verzerren mehrerer Tabellenzellen

Wie Stereoscott oben sagte, sind Verschachtelungstabellen eine mögliche Lösung, die nicht empfohlen wird. Vermeiden Sie die Verwendung von Tabellen.


-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
Hallo und willkommen bei S / O - und vielen Dank für Ihren aktiven Beitrag! :) Bitte erwägen Sie, Ihre Antwort zu erweitern. Es ist hilfreich, anstelle von Code einen Kontext für eine Antwort bereitzustellen. Es ist auch erwähnenswert, dass diese Frage 2009 gestellt wurde :) Wie schreibe ich eine gute Antwort? ist es wert zu lesen!
CmdrSharp
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.