Formularz wewnątrz tabeli

Włączam niektóre formularze w tabeli HTML, aby dodawać nowe wiersze i aktualizować bieżące wiersze. Problem, który dostaję jest to, że kiedy sprawdzam formularze w moich narzędzi dev, widzę, że elementy formularza są zamykane natychmiast po otwarciu (wejścia, itp nie są zawarte w formularzu).

Jako takie, przesyłanie formularza nie zawiera 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ę.
Author: Alex, 2011-05-11
Source

3 answers

A form is not allowed to be a child element of a table, tbody lub tr. Próba umieszczenia takiego formularza spowoduje, że przeglądarka przeniesie formularz do niego, pojawi się po tabeli (pozostawiając jej zawartość - wiersze tabeli, komórki tabeli, Dane wejściowe itp.).

Możesz mieć całą tabelę wewnątrz formularza. Możesz mieć formularz wewnątrz komórki tabeli. Nie możesz mieć części tabeli w formularzu.

Użyj jednego formularza wokół całej tabeli. Następnie albo użyj kliknij przycisk Wyślij, aby określić, który wiersz należy przetworzyć (aby był szybki) lub przetworzyć każdy wiersz (umożliwiając zbiorcze aktualizacje).

 302
Author: Quentin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-07-25 14:19:39

Użyj atrybutu "form" , Jeśli chcesz zapisać swój znacznik: 

<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>
 148
Author: Vladimir,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-29 05:43:19

Jeśli chcesz mieć "edytowalną siatkę", tj. strukturę podobną do tabeli, która pozwala na przekształcenie dowolnego wiersza w Formularz, użyj CSS, który naśladuje układ znacznika tabeli: display:table, display:table-row, i display:table-cell.

Nie ma potrzeby owijania całego stołu w formularz i nie ma potrzeby tworzenia 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łej tabeli w Formularz polega na tym, że wszystkie elementy formularza będą wysyłane przy wysyłaniu (może to jest pożądany, ale prawdopodobnie nie). Metoda ta pozwala na zdefiniowanie formularza dla każdego "wiersza" i wysłanie tylko tego wiersza danych podczas przesyłania.

Problem z zawijaniem znacznika formularza wokół znacznika TR (lub TR wokół formularza) polega na tym, że jest to nieprawidłowy HTML. Formularz nadal będzie zezwalał na przesyłanie jak zwykle, ale w tym momencie DOM jest zepsuty. Uwaga: spróbuj uzyskać potomne Elementy formularza lub TR za pomocą JavaScript, może to prowadzić do nieoczekiwanych wyników.

Zauważ, że IE7 nie obsługuje tych stylów tabel CSS i IE8 będzie potrzebował deklaracji doctype, aby przejść do trybu "standards": (spróbuj tego lub czegoś równoważnego) 

<!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ć tabelę danych css tak samo, jak w przypadku użycia tagów TABLE, TR i TD. Większość z nich tak.

Zauważ, że możesz również naśladować THEAD, TBODY, TFOOT, zawijając grupy wierszy w inny DIV z display: table-header-group, table-row-group oraz table-footer-group odpowiednio.

Uwaga: jedyną rzeczą, której nie można zrobić z tą metodą jest colspan.

Zobacz tę ilustrację: http://jsfiddle.net/ZRQPP/

 25
Author: Matthew,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-01-26 16:02:06