Creare una tabella HTML in cui ogni TR è una FORMA

Sto cercando di creare una tabella in cui ogni riga è una forma. Voglio che ogni ingresso è in una tabella diversa divisione, ma ho ancora bisogno, per esempio, che tutti i primi ingressi appartengono alla stessa tabella a testa e così via.

Quello che sto cercando di fare è una griglia modificabile, più o meno questo:

<table>
    <tr>
        <form method="GET" action="whatever">
            <td><input type="text"/></td>
            <td><input type="text"/></td>
        </form>
    </tr>
    <tr>
        <form method="GET" action="whatever">
            <td><input type="text"/></td>
            <td><input type="text"/></td>
        </form>
    </tr>
</table>

Ma a quanto pare non posso organizzare il tag in questo modo (o almeno così è quello che il validatore del w3c ha detto).

Un buon modo per fare questo?

InformationsquelleAutor vtortola | 2010-10-27

 

10 Replies
  1. 85

    Se si desidera una “griglia modificabile”, cioè una tabella come la struttura che ti permette di effettuare tutte le righe di un modulo, è possibile utilizzare i CSS, che imita il tag TABLE layout: display:table, display:table-row, e display:table-cell.

    Non c’è bisogno di avvolgere la vostra intera tabella in un modulo e non c’è bisogno di creare un modulo separato e una tabella per ogni apparente riga della tabella.

    Invece, provare questo:

    <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 avvolgendo l’intera TABELLA in una FORMA qualsiasi e tutti gli elementi del modulo, sarà inviato su submit (forse è desiderato, ma probabilmente non). Questo metodo consente di definire una forma per ogni “riga” e di inviare solo quella riga di dati su invia.

    Il problema con il confezionamento di un tag FORM intorno a un tag TR (o TR intorno alla FORMA) è che il codice HTML non valido. Il MODULO consentirà comunque presentare come di consueto, ma a questo punto il DOM è rotto. Nota: Cercare di ottenere il bambino elementi del MODULO o TR con JavaScript, può portare a risultati inaspettati.

    Nota che IE7 non supporta queste CSS stili di tabella e IE8 bisogno di una dichiarazione doctype per farlo in “standard” modalità: (provare 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 supporta la visualizzazione:tavolo, display:table-row e display:table-cell dovrebbe mostrare il css tabella di dati lo stesso come si farebbe se si stesse utilizzando la TABLE, TR e TD tag. La maggior parte di loro.

    Di notare che si può anche imitare THEAD, TBODY, TFOOT, avvolgendo i tuoi gruppi di righe in un altro DIV con display: table-header-group, table-row-group e table-footer-group rispettivamente.

    NOTA: L’unica cosa che si può fare con questo metodo è colspan.

    Check out questa illustrazione: http://jsfiddle.net/ZRQPP/

    • Grazie ! Questo salvato la mia giornata
  2. 12

    Se tutte queste righe sono correlati e si devono modificare i dati tabulari … perché non basta avvolgere l’intera tabella in un modulo e modificare GET per POST (a meno che non avete intenzione di essere l’invio di più che la massima quantità di dati di un GET richiesta può inviare).

    (Che presumendo, naturalmente, che tutti i dati sono stati inviati nello stesso posto.)

    <form method="POST" action="your_action">
    <table>
    <tr>
    <td><input type="text" name="r1c1" value="" /></td>
    <!-- ... snip ... -->
    </tr>
    <!-- ... repeat as needed ... -->
    </table>
    </form>
    • Questa è probabilmente la soluzione migliore.
    • Se ho capito bene, stai cercando di fare un datagrid, sia per la visualizzazione di dati esistenti, e per consentire la modifica / inserimento dei dati. La cosa migliore sarebbe utilizzare javascript per creare e costruire questo datagrid — ci sono varie buone là fuori.
  3. 9

    Si possono avere problemi con la larghezza della colonna, ma è possibile impostare quelle esplicitamente.

    <table>
      <tr>
        <td>
           <form>
             <table>
               <tr>
                 <td></td> 
                 <td></td> 
                 <td></td> 
                 <td></td> 
                 <td></td> 
                 <td></td> 
               </tr>
             </table>
           </form>
         </td>
        </tr>
      <tr>
        <td>
           <form>
             <table>
               <tr>
                 <td></td> 
                 <td></td> 
                 <td></td> 
                 <td></td> 
                 <td></td> 
                 <td></td> 
               </tr>
             </table>
           </form>
         </td>
        </tr>
      </table>

    Puoi anche prendere in considerazione di fare un unico modulo, e quindi utilizzando jQuery per selezionare il modulo elementi della riga che si desidera, la serializzazione di loro, e li trasmette come forma.

    Vedere: http://api.jquery.com/serialize/

    Inoltre, ci sono un certo numero di molto bello griglia plugin:
    http://www.google.com/search?q=jquery+grid&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a

    • certamente la risposta alla domanda – ma accidenti che brutto 🙂
    • Questo è davvero orribile.
    • Sì, questa domanda è probabilmente un sintomo di fare qualcosa nel modo sbagliato, ma mi sembra che dovrebbe rispondere alla domanda, oltre a prendere in giro su di esso.
    • -1 per mostrare a qualcuno come fare qualcosa ancora di più in modo non corretto.
    • In realtà, questo è un markup valido, per quanto io non lo uso.
    • Valido, ma probabilmente non è accettabile per la maggior parte dei casi. Quando si avvolge come questo, tutte le colonne di perdere il loro allineamento.
    • Questa è la cosa che nessuno dovrebbe mai fare… (in riferimento al markup html, jquery non serializzazione)

  4. 9

    Se si utilizza JavaScript è un’opzione, e si desidera evitare di nidificazione tabelle, includere jQuery e provare il seguente metodo.

    Prima, dovrete dare a ogni riga un id univoco, in questo modo:

    <table>
      <tr id="idrow1"><td> ADD AS MANY COLUMNS AS YOU LIKE  </td><td><button onclick="submitRowAsForm('idrow1')">SUBMIT ROW1</button></td></tr>
      <tr id="idrow2"><td> PUT INPUT FIELDS IN THE COLUMNS  </td><td><button onclick="submitRowAsForm('idrow2')">SUBMIT ROW2</button></td></tr>
      <tr id="idrow3"><td>ADD MORE THAN ONE INPUT PER COLUMN</td><td><button onclick="submitRowAsForm('idrow3')">SUBMIT ROW3</button></td></tr>
    </table>

    Quindi, includere la seguente funzione in JavaScript per la tua pagina.

    <script>
    function submitRowAsForm(idRow) {
      form = document.createElement("form"); //CREATE A NEW FORM TO DUMP ELEMENTS INTO FOR SUBMISSION
      form.method = "post"; //CHOOSE FORM SUBMISSION METHOD, "GET" OR "POST"
      form.action = ""; //TELL THE FORM WHAT PAGE TO SUBMIT TO
      $("#"+idRow+" td").children().each(function() { //GRAB ALL CHILD ELEMENTS OF <TD>'S IN THE ROW IDENTIFIED BY idRow, CLONE THEM, AND DUMP THEM IN OUR FORM
            if(this.type.substring(0,6) == "select") { //JQUERY DOESN'T CLONE <SELECT> ELEMENTS PROPERLY, SO HANDLE THAT
                input = document.createElement("input"); //CREATE AN ELEMENT TO COPY VALUES TO
                input.type = "hidden";
                input.name = this.name; //GIVE ELEMENT SAME NAME AS THE <SELECT>
                input.value = this.value; //ASSIGN THE VALUE FROM THE <SELECT>
                form.appendChild(input);
            } else { //IF IT'S NOT A SELECT ELEMENT, JUST CLONE IT.
                $(this).clone().appendTo(form);
            }
    
        });
      form.submit(); //NOW SUBMIT THE FORM THAT WE'VE JUST CREATED AND POPULATED
    }
    </script>

    Quindi, cosa abbiamo fatto qui? Abbiamo dato ogni riga di un id univoco e include un elemento nella riga che può innescare la presentazione di tale riga identificatore univoco. Quando l’elemento di presentazione è attivato, un nuovo modulo viene creato dinamicamente e set up. Quindi utilizzando jQuery, abbiamo clone di tutti gli elementi contenuti nel <td>‘s di fila che ci sono state passate e aggiungere i cloni del nostro creato dinamicamente form. Infine, ci sottopone a tale modulo.

    • Ho provato questo metodo, ma sto usando richieste ajax così ora tutte queste righe sono sempre attaccati alla parte inferiore della tabella. Cercando di capire un modo di nascondere questi.
    • Buon suggerimento! Per questo codice funziona in FireFox ho dovuto aggiungere form.style.display = "none"; document.body.appendChild(form); poco prima forma.submit(); E assicurarsi di utilizzare la stessa var idRow invece di id.
    • Risposta impressionante. Mi ha salvato giorni.
  5. 4

    Se tutte queste righe sono correlati e si devono modificare i dati tabulari … perché non basta avvolgere l’intera tabella in un modulo e modificare ARRIVARE al POST (a meno che non avete intenzione di essere l’invio di più che la massima quantità di dati di una richiesta GET possibile inviare).

    Non posso avvolgere l’intera tabella in una forma, perché alcuni campi di input di ogni riga sono input type=”file” e i file possono essere di grandi dimensioni. Quando l’utente invia il form, voglio POSTARE solo i campi della riga corrente, non in tutti i campi di tutte le righe che possono avere inutili file di grandi dimensioni, causando modulo per presentare molto lentamente.

    Così, ho provato nidificazione errata: tr/la forma e la forma/tr. Tuttavia, funziona solo quando non si tenta di aggiungere nuovi ingressi in modo dinamico in forma. Aggiunti dinamicamente ingressi non appartengono a annidati in modo non corretto forma, quindi non vengono segnalate. (valida forma/tabella dinamicamente gli ingressi sono presentati benissimo).

    Di nidificazione div[display:table]/form/div[display:table-row]/div[display:table-cell] prodotto non uniforme larghezze delle colonne della griglia. Sono riuscito a ottenere un layout uniforme quando ho sostituito div[display:table-row] formare[display:table-row] :

    div.grid {
        display: table;
    }
    
    div.grid > form {
        display: table-row;
    
    
    div.grid > form > div {
        display: table-cell;
    }
    div.grid > form > div.head {
        text-align: center;
        font-weight: 800;
    }

    Per il layout per essere visualizzato correttamente in IE8:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    ...
    <meta http-equiv="X-UA-Compatible" content="IE=8, IE=9, IE=10" />

    Esempio di output:

    <div class="grid" id="htmlrow_grid_item">
    <form>
        <div class="head">Title</div>
        <div class="head">Price</div>
        <div class="head">Description</div>
        <div class="head">Images</div>
        <div class="head">Stock left</div>
        <div class="head">Action</div>
    </form>
    <form action="/index.php" enctype="multipart/form-data" method="post">
        <div title="Title"><input required="required" class="input_varchar" name="add_title" type="text" value="" /></div>

    Sarebbe molto più difficile fare questo codice funziona in IE6/7, tuttavia.

  6. 3

    Se è possibile utilizzare javascript e richiedono rigorosamente sul web, è possibile inserire caselle di testo, caselle di controllo e quant’su ogni riga della tabella e, alla fine di ogni riga, posizionare il pulsante (o un link di classe rowSubmit) “salva”. Senza alcuna FORMA di tag. Modulo che sarà simulato con JS e Ajax come questo:

    <script type="text/javascript">
    $(document).ready(function(){
      $(".rowSubmit").click(function()
      {
         var form = '<form><table><tr>' + $(this).closest('tr').html() + '</tr></table></form>';
         var serialized = $(form).serialize(); 
         $.get('url2action', serialized, function(data){
           //... can be empty
         }); 
       });
    });        
    </script>

    Voi cosa ne pensate?

    PS: Se scrivi in jQuery questo:

    $("valid HTML string")
    $(variableWithValidHtmlString)

    Sarà trasformato in oggetto jQuery e si può lavorare con esso come nei jQuery.

    • PS: Se le righe sono aggiunti dinamicamente con javascript evento “click” non funziona, se definita come mostrato in figura. In questo caso la definizione dell’evento tramite jQuery.live() o jQuery.on()
  7. 1

    Tabelle non sono fatti per questo, perché non utilizzare <div>‘s e CSS?

    • Le tabelle non significa per rappresentare i dati tabulari? Sto cercando di fare una griglia modificabile.
    • Io non sono sicuro di una forma conta come dati. Sarà certamente mai convalidare la tua strada perché non ci sono limiti a ciò che i tag devono / possono seguire un <table> o <tr> tag
    • la parola chiave è “dati”. Nel tuo esempio, si utilizza per il controllo del modulo di input di layout NON la presentazione dei dati all’utente finale. Forse, se si ha spiegato che lo scopo della tabella è, sarebbe più facile consigliare alcune alternative.
    • Modificabile griglia di dati
    • La maggior parte implimentations di griglia modificabile che ho visto utilizzare un modulo avvolto intorno al tavolo, e quindi ogni riga potrebbe avere un pulsante di salvataggio che passerà una chiave per l’azione di invio (o l’uso di ajax e di invio del modulo non significa molto, comunque).
    • Sei raccolta dati, come ho scritto nella mia tarda risposta. Che cosa siete dopo è display: table-cell;, troppo brutti e vecchi IE sono ancora lì intorno …

  8. 1

    Secondo I Harmen del div suggerimento. In alternativa, si può avvolgere la tabella in un modulo, e di utilizzare javascript per catturare la riga di messa a fuoco e regolare l’action del form tramite javascript prima di inviare.

  9. 1

    Ho avuto un problema simile a quello posato per la domanda originale. Sono stato incuriosito dal div stile come gli elementi di una tabella (non sapevo che si potesse fare!) e ha dato una corsa. Tuttavia, la mia soluzione è stata quella di mantenere il mio tavoli avvolti in tag, ma rinominare ogni input e selezionare l’opzione per diventare le chiavi dell’array, che ora sto analisi per ogni elemento della riga selezionata.

    Qui è una singola riga della tabella. Nota che il tasto [4] è il rendering ID della riga nel database da cui questa riga della tabella è stato recuperato:

    <table>
      <tr>
        <td>DisabilityCategory</td>
        <td><input type="text" name="FormElem[4][ElemLabel]" value="Disabilities"></td>
        <td><select name="FormElem[4][Category]">
            <option value="1">General</option>
            <option value="3">Disability</option>
            <option value="4">Injury</option>
            <option value="2"selected>School</option>
            <option value="5">Veteran</option>
            <option value="10">Medical</option>
            <option value="9">Supports</option>
            <option value="7">Residential</option>
            <option value="8">Guardian</option>
            <option value="6">Criminal</option>
            <option value="11">Contacts</option>
          </select></td>
        <td>4</td>
        <td style="text-align:center;"><input type="text" name="FormElem[4][ElemSeq]" value="0" style="width:2.5em; text-align:center;"></td>
        <td>'ccpPartic'</td>
        <td><input type="text" name="FormElem[4][ElemType]" value="checkbox"></td>
        <td><input type="checkbox" name="FormElem[4][ElemRequired]"></td>
        <td><input type="text" name="FormElem[4][ElemLabelPrefix]" value=""></td>
        <td><input type="text" name="FormElem[4][ElemLabelPostfix]" value=""></td>
        <td><input type="text" name="FormElem[4][ElemLabelPosition]" value="before"></td>
        <td><input type="submit" name="submit[4]" value="Commit Changes"></td>
      </tr>
    </table>

    Quindi, in PHP, sto utilizzando il seguente metodo per memorizzare in un array ($SelectedElem) ciascuno degli elementi della riga corrispondente al pulsante di invio. Sto usando print_r() solo per illustrare:

    $SelectedElem = implode(",", array_keys($_POST['submit']));
    print_r ($_POST['FormElem'][$SelectedElem]);

    Forse questo sembra contorto, ma si è rivelato essere abbastanza semplice, e ha conservato la struttura organizzativa del tavolo.

    • Lo svantaggio di questo metodo è che il completamento automatico terrà elenchi separati per ogni riga, che può non essere un grosso problema, basta sconcertante per gli utenti finali. Inoltre, la presentazione di un lotto di righe può soffiare il server post_max_limit, che in PHP significa che getta i dati di distanza. Che può essere un problema serio se l’interfaccia permette all’utente di aggiungere righe alla tabella.
  10. 0

    è semplice come non si utilizza una tabella per il markup, come affermato da Harmen. Non siete visualizzazione dei dati dopo tutto, tu sei la raccolta dei dati.

    Prendo per esempio, la domanda 23 qui: http://accessible.netscouts-ggmbh.eu/en/developer.html#fb1_22_5

    Sulla carta, è buono come è. Se hai avuto per visualizzare i risultati, si sarebbe probabilmente essere OK.

    Ma si può sostituire con … 4 paragrafi con un’etichetta e selezionare (opzione sarebbe la intestazioni di prima linea). Un paragrafo per linea, questo è molto più semplice.

    • Credo che una griglia, generalmente, entrambi i display dei dati E permette l’editing.
    • Una tabella è complesso roba in HTML. Una forma troppo. Non vorrei provare a giocare con entrambi quando ci sono soluzioni più semplici, è una ricetta per avere il peggio di entrambi i mondi. E non sto parlando di una griglia (visual cosa), c’è (o dovrebbe essere) display: table-cell; per questo, ma l’elemento di tabella, con i suoi vincoli in HTML.

Lascia un commento