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

— Alex
źródło

<form>nie można go włożyć do środka <tr>.

— Derek 朕會功夫

I zapomniałeś zamknąć <tr>.

— Derek 朕會功夫

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

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

@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

Nie potrzebujesz przycisku edycji dla rozwiązania zaproponowanego w pierwotnym pytaniu.

— Quentin,

Dlaczego zabronione <form>wewnątrz <table>w normach?

— 1234ru,

@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

Uwaga, to rozwiązanie jest poprawne tylko z HTML5.

— threenplusone

ponadto nie będzie działać w przeglądarce internetowej więcej informacji tutaj

— Souhaieb Besbes

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

Wydaje się, że jest „w fazie rozwoju” i można go używać

— 1156544

@ 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

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

+1 za wzmiankę o tym nie włącza colspan ... który musiałem przeoczyć przy pierwszym czytaniu ;-)

— Johannes Rudolph

To powinna być zielona odpowiedź (nawet jeśli nie używa się tak naprawdę znacznika tabeli)

— Alessio