Formularz w tabeli

238

Dołączam niektóre formularze do tabeli HTML, aby dodać nowe wiersze i zaktualizować bieżące wiersze. Problem, który otrzymuję, polega na tym, że kiedy sprawdzam formularze w moich narzędziach programistycznych, widzę, że elementy formularza są zamykane natychmiast po otwarciu (dane wejściowe itp. Nie są zawarte w formularzu).

W związku z tym przesłanie formularza nie obejmuje pól.

Wiersz tabeli i dane wejściowe są następujące:

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

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

Każda pomoc byłaby świetna, dziękuję.

html firebug html-table forms Alex
źródło
6
<form>nie można go włożyć do środka <tr>.
Derek 朕 會 功夫
1
I zapomniałeś zamknąć <tr>.
Derek 朕 會 功夫
1
Użyj display: table-row do formularza i porzuć tag tabeli. Zobacz moją odpowiedź tutaj: stackoverflow.com/a/15600151/1038812
Matthew
Nie może, ale działa ...
Sandburg,

Odpowiedzi:

369

Forma jest niedozwolone się element podrzędne table, tbodylub tr. Próba umieszczenia jednego z nich spowoduje, że przeglądarka przeniesie do niego formularz pojawi się za tabelą (pozostawiając zawartość - wiersze tabeli, komórki tabeli, dane wejściowe itp. - z tyłu).

Możesz mieć cały stół w formularzu. Możesz mieć formularz w komórce tabeli. Nie możesz mieć części tabeli w formularzu.

Użyj jednego formularza wokół całego stołu. Następnie użyj klikniętego przycisku Prześlij, aby określić, który wiersz do przetworzenia (aby był szybki) lub przetworzyć każdy wiersz (zezwalając na zbiorcze aktualizacje).

HTML 5 wprowadza ten form atrybut . Pozwala to na dostarczenie jednego formularza na wiersz poza tabelą, a następnie powiązanie całej kontroli formularza w danym wierszu z jedną z tych formularzy przy użyciu jego id.

Quentin
źródło
2
Uważaj, używając jednego formularza dla całej tabeli, wszystkie pola zostaną wysłane na serwer, nawet jeśli są puste. Może to być ogromna ilość danych !!! Proszę do użytku masowego / publicznego, wolę używać okna dialogowego (formularza nie ma w tabeli) otwartego z przycisku w tym wierszu.
Loenix
1
@Loenix: Jest bardzo mało prawdopodobne, abyś umieścił w tabeli wystarczającą ilość danych, aby stanowił znaczące obciążenie dla przepustowości ludzi (przynajmniej w porównaniu z wielkością typowej strony internetowej). Wymaganie od użytkowników załadowania innej strony między wyborem edycji wiersza a możliwością wprowadzania zmian, OTOH, byłoby irytującą dodatkową interakcją, którą musieliby wykonać.
Quentin
1
Nie potrzebujesz przycisku edycji dla rozwiązania zaproponowanego w pierwotnym pytaniu.
Quentin,
1
Dlaczego zabronione <form>wewnątrz <table>w normach?
1234ru,
4
@Qentin wystarczy. Szkoda, że ​​nadal trwa to dwie dekady bez wyraźnego powodu.
1234ru,
187

Użyj atrybutu „formularz” , jeśli chcesz zapisać znaczniki:

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

(* Pola formularza poza znacznikiem <form>)

Zobacz także pierwsze 2 komentarze

Vladimir
źródło
64
Uwaga, to rozwiązanie jest poprawne tylko z HTML5.
threenplusone
18
ponadto nie będzie działać w przeglądarce internetowej więcej informacji tutaj
Souhaieb Besbes
1
Status atrybutu formularza jest „brany pod uwagę”, co oznacza, że ​​musisz być bardzo cierpliwy developer.microsoft.com/en-us/microsoft-edge/platform/status/... w międzyczasie możesz wypróbować tę wielopełniaczowość i sprawdzić, czy to działa dla Ciebie stackoverflow.com/a/26696165/648484
Souhaieb Besbes
1
Wydaje się, że jest „w fazie rozwoju” i można go używać
1156544
1
@ user1156544 Jest teraz obsługiwany w Edge, ale nie w IE. Jeśli w ogóle potrzebujesz obsługi IE, nie masz szczęścia z tym rozwiązaniem. Mój plan polega na użyciu dwóch tabel dla dwóch elementów formularza (nie mogę uwierzyć, że muszę to zrobić). Dzięki Microsoft!
Pluton
41

Jeśli chcesz edycji „siatkę”, czyli tabelę jak strukturę, która pozwala, aby każdy z wierszy formularza, za pomocą CSS, który naśladuje układ tabeli tagu: display:table, display:table-row, i display:table-cell.

Nie ma potrzeby zawijania całego stołu w formularzu i nie trzeba tworzyć osobnego formularza i tabeli dla każdego widocznego wiersza tabeli.

Spróbuj zamiast tego:

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

Problem z zawijaniem całego TABELI w FORMULARZE polega na tym, że wszystkie elementy formularza zostaną wysłane po przesłaniu (być może jest to pożądane, ale prawdopodobnie nie). Ta metoda pozwala zdefiniować formularz dla każdego „wiersza” i przesłać tylko ten wiersz danych po przesłaniu.

Problem z owijaniem znacznika FORM wokół znacznika TR (lub TR wokół FORMULARZA) polega na tym, że jest to nieprawidłowy kod HTML. FORMAT nadal pozwala na przesyłanie w zwykły sposób, ale w tym momencie DOM jest uszkodzony. Uwaga: spróbuj pobrać elementy potomne z FORMULARZA lub TR z JavaScript, może to prowadzić do nieoczekiwanych wyników.

Zauważ, że IE7 nie obsługuje tych stylów tabel CSS, a IE8 będzie potrzebować deklaracji typu doctype, aby przejść do trybu „standardów”: (spróbuj tego lub podobnego)

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

Każda inna przeglądarka obsługująca display: table, display: table-row i display: table-cell powinna wyświetlać twoją tabelę danych css tak samo, jak gdybyś używał tagów TABLE, TR i TD. Większość z nich ma.

Pamiętaj, że możesz także naśladować THEAD, TBODY, TFOOT owijając swoje grupy wierszy w innym div z display: table-header-group, table-row-groupi table-footer-groupodpowiednio.

UWAGA: Jedyne, czego nie można zrobić z tą metodą, to colspan.

Sprawdź tę ilustrację: http://jsfiddle.net/ZRQPP/

Mateusz
źródło
4
+1 za wzmiankę o tym nie włącza colspan ... który musiałem przeoczyć przy pierwszym czytaniu ;-)
Johannes Rudolph
1
To powinna być zielona odpowiedź (nawet jeśli nie używa się tak naprawdę znacznika tabeli)
Alessio