Forma all'interno di un tavolo

239

Sto includendo alcuni moduli all'interno di una tabella HTML per aggiungere nuove righe e aggiornare le righe correnti. Il problema che sto riscontrando è che quando ispeziono i moduli nei miei strumenti di sviluppo, vedo che gli elementi del modulo vengono chiusi immediatamente dopo l'apertura (input, ecc. Non sono inclusi nel modulo).

Pertanto, l'invio di un modulo non include i campi.

La riga della tabella e gli input sono i seguenti:

<tr>
    <form method="post" action="">
        <td>
            <input type="text" name="job_num">
        </td>

        <td>
            <input type="text" name="desc">
        </td>
    </form>
</tr>

Qualsiasi aiuto sarebbe fantastico, grazie.

— alex
fonte

<form>non può essere messo dentro <tr>.

— Derek 功夫會功夫 il

E hai dimenticato di chiudere il file <tr>.

— Derek 功夫會功夫 il

Usa display: table-row per il tuo modulo e elimina del tutto il tag table. Vedi la mia risposta qui: stackoverflow.com/a/15600151/1038812

— Matthew

Non può, ma funziona ...

— Sandburg,

Risposte:

371

Un modulo non può essere un elemento figlio di un table, tbodyo tr. Tentare di metterne uno tenderà a far sì che il browser sposti il modulo su di esso appare dopo la tabella (lasciando il suo contenuto - righe di tabella, celle di tabella, input, ecc.).

Puoi avere un'intera tabella all'interno di un modulo. Puoi avere un modulo all'interno di una cella di tabella. Non è possibile avere parte di una tabella all'interno di un modulo.

Usa un modulo attorno all'intero tavolo. Quindi utilizzare il pulsante Invia selezionato per determinare quale riga elaborare (per essere veloce) o elaborare ogni riga (consentendo aggiornamenti in blocco).

HTML 5 introduce l' form attributo . Ciò consente di fornire un modulo per riga all'esterno della tabella e quindi associare tutto il controllo del modulo in una determinata riga a uno di quei moduli che ne utilizzano id.

— Quentin
fonte

Fai attenzione usando un modulo per l'intera tabella, tutti i campi verranno inviati al server, anche se sono vuoti. Potrebbe essere un'enorme quantità di dati !!! Per un uso di massa / pubblico, preferisci utilizzare una finestra di dialogo (modulo non nella tabella) aperta da un pulsante in quella riga.

— Loenix,

@Loenix: è molto improbabile che inserirai abbastanza dati nella tabella per essere un onere significativo sulla larghezza di banda delle persone (almeno se confrontato con le dimensioni di una tipica pagina Web). Richiedere agli utenti di caricare un'altra pagina tra la scelta di modificare una riga e la possibilità di apportare le modifiche, OTOH, sarebbe una fastidiosa interazione extra che dovrebbero eseguire.

— Quentin,

Non è necessario un pulsante di modifica per la soluzione proposta nella domanda originale.

— Quentin,

Perché è vietato <form>all'interno degli <table>standard?

— 1234ru

@Qentin abbastanza giusto. È un peccato che rimanga dopo due decenni senza una ragione ovvia.

— 1234ru

188

Utilizzare l' attributo "modulo" , se si desidera salvare il markup:

<form method="GET" id="my_form"></form>

<table>
    <tr>
        <td>
            <input type="text" name="company" form="my_form" />
            <button type="button" form="my_form">ok</button>
        </td>
    </tr>
</table>

(* Campi modulo all'esterno del tag <form>)

Vedi anche i primi 2 commenti

— Vladimir
fonte

Nota, questa soluzione è valida solo con HTML5.

— threenplusone,

inoltre, non funzionerà in Internet Explorer maggiori informazioni qui

— Souhaieb Besbes,

Lo stato dell'attributo del modulo è "in esame", il che significa che devi essere molto paziente developer.microsoft.com/en-us/microsoft-edge/platform/status/… nel frattempo puoi provare questo polyfill e vedere se funziona per te stackoverflow.com/a/26696165/648484

— Souhaieb Besbes

Sembra "in fase di sviluppo" ora, e va bene usare

— user1156544

@ user1156544 Ora è supportato in Edge, ma non in IE. Se hai bisogno di supportare IE, sei sfortunato con questa soluzione. Il mio piano è di usare due tabelle per due elementi del modulo (non posso credere di doverlo fare). Grazie Microsoft!

— Plutone,

Se si desidera una "griglia modificabile", ovvero una struttura simile a una tabella che consente di trasformare una delle righe in un modulo, utilizzare CSS che imita il layout del tag TABLE: display:table , display:table-row, e display:table-cell.

Non è necessario racchiudere l'intera tabella in un modulo e non è necessario creare un modulo e una tabella separati per ogni riga apparente della tabella.

Prova questo invece:

<style>
DIV.table 
{
    display:table;
}
FORM.tr, DIV.tr
{
    display:table-row;
}
SPAN.td
{
    display:table-cell;
}
</style>
...
<div class="table">
    <form class="tr" method="post" action="blah.html">
        <span class="td"><input type="text"/></span>
        <span class="td"><input type="text"/></span>
    </form>
    <div class="tr">
        <span class="td">(cell data)</span>
        <span class="td">(cell data)</span>
    </div>
    ...
</div>

Il problema con il wrapping dell'intera TABELLA in un FORM è che tutti gli elementi del modulo verranno inviati al momento dell'invio (forse è desiderato ma probabilmente no). Questo metodo consente di definire un modulo per ogni "riga" e inviare solo quella riga di dati al momento dell'invio.

Il problema con il wrapping di un tag FORM attorno a un tag TR (o TR attorno a un FORM) è che è HTML non valido. Il FORM consentirà comunque l'invio come al solito, ma a questo punto il DOM è rotto. Nota: prova a ottenere gli elementi figlio del tuo FORM o TR con JavaScript, può portare a risultati imprevisti.

Nota che IE7 non supporta questi stili di tabella CSS e IE8 avrà bisogno di una dichiarazione doctype per metterlo in modalità "standard": (prova questo o qualcosa di equivalente)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Qualsiasi altro browser che supporti display: table, display: table-row e display: table-cell dovrebbe mostrare la tua tabella di dati CSS allo stesso modo che se utilizzassi i tag TABLE, TR e TD. Molti di loro lo fanno.

Si noti che è possibile anche THEAD mimica, TBODY, TFOOT avvolgendo i gruppi di righe in un altro DIV con display: table-header-group, table-row-groupe table-footer-group, rispettivamente.

NOTA: l'unica cosa che non puoi fare con questo metodo è colspan.

Dai un'occhiata a questa illustrazione: http://jsfiddle.net/ZRQPP/

— Matteo
fonte

+1 per menzionarlo non abilita colspan ... che devo aver perso la prima lettura attraverso ;-)

— Johannes Rudolph

Questa dovrebbe essere la risposta a quadretti verdi (anche se non usi davvero il tag da tavolo)

— Alessio