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

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?

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.

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.

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>

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.

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

Hoffentlich hilft es.

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

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

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>

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.

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