Ik neem enkele formulieren op in een HTML-tabel om nieuwe rijen toe te voegen en huidige rijen bij te werken. Het probleem dat ik krijg is dat wanneer ik de formulieren in mijn ontwikkelhulpmiddelen inspecteer, ik zie dat de formulierelementen onmiddellijk na het openen worden gesloten (invoer, enz. Zijn niet opgenomen in het formulier).
Als zodanig bevat het indienen van een formulier geen velden.
De tabelrij en invoer zijn als volgt:
<tr>
<form method="post" action="">
<td>
<input type="text" name="job_num">
</td>
<td>
<input type="text" name="desc">
</td>
</form>
</tr>
Alle hulp zou geweldig zijn, bedankt.
Antwoord 1, autoriteit 100%
Een formulier is niet toegestaanom een onderliggend element van een tablete zijn, tbodyof tr. Als u probeert er een te plaatsen, heeft de browser de neiging om het formulier te verplaatsen naar het verschijnt nade tabel (terwijl de inhoud ervan – tabelrijen, tabelcellen, invoer, enz. – achterblijft).
Je kunt een hele tabel in een formulier hebben. U kunt een formulier in een tabelcel hebben. U kunt geen deel van een tabel in een formulier hebben.
Gebruik één formulier rond de hele tafel. Gebruik vervolgens de aangeklikte verzendknop om te bepalen welke rij moet worden verwerkt (om snel te zijn) of verwerk elke rij (bulkupdates toestaan).
HTML 5 introduceert het formkenmerk. Dit stelt u in staat om één formulier per rij buiten de tabelop te geven en vervolgens alle formulierbesturingselementen in een bepaalde rij te koppelen aan een van die formulieren met behulp van zijn id.
Antwoord 2, autoriteit 52%
Gebruik het “form”-kenmerkals u uw opmaak wilt opslaan:
<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>
(*Formuliervelden buiten de < form >-tag)
Antwoord 3, autoriteit 12%
Als u een “bewerkbaar raster” wilt, dwz een tabelachtige structuur waarmee u van elk van de rijen een formulier kunt maken, gebruik dan CSS die de lay-out van de TABLE-tag nabootst: display:table, display:table-rowen display:table-cell.
Het is niet nodig om uw hele tabel in een formulier te stoppen en u hoeft geen apart formulier en tabel te maken voor elke schijnbare rij van uw tabel.
Probeer dit in plaats daarvan:
<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>
Het probleem met het inpakken van de hele TABEL in een FORM is dat alle formulierelementen bij het indienen worden verzonden (misschien is dat gewenst, maar waarschijnlijk niet). Met deze methode kunt u een formulier voor elke “rij” definiëren en alleen die rij met gegevens verzenden bij het verzenden.
Het probleem met het wikkelen van een FORM-tag rond een TR-tag (of TR rond een FORM) is dat het ongeldige HTML is. Het FORM staat nog steeds toe om zoals gewoonlijk in te dienen, maar op dit punt is de DOM verbroken. Opmerking: probeer de onderliggende elementen van uw FORM of TR met JavaScript te krijgen, dit kan tot onverwachte resultaten leiden.
Merk op dat IE7 deze CSS-tabelstijlen niet ondersteunt en dat IE8 een doctype-declaratie nodig heeft om het in “standaarden”-modus te krijgen: (probeer deze of iets gelijkwaardigs)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Elke andere browser die display:table, display:table-row en display:table-cell ondersteunt, zou uw CSS-gegevenstabel op dezelfde manier moeten weergeven als wanneer u de TABLE-, TR- en TD-tags zou gebruiken. De meeste wel.
Merk op dat je THEAD, TBODY, TFOOT ook kunt nabootsen door je rijgroepen in een andere DIV te plaatsen met display: table-header-group, table-row-groupen table-footer-grouprespectievelijk.
OPMERKING:het enige dat u met deze methode niet kunt doen, is colspan.
Bekijk deze illustratie: http://jsfiddle.net/ZRQPP/