Tablo içindeki form

239

Yeni satırlar eklemek ve geçerli satırları güncellemek için HTML tablosunun içine bazı formlar ekliyorum. Aldığım sorun, geliştirici araçlarımdaki formları incelediğimde, form öğelerinin açıldıktan hemen sonra kapatıldığını görüyorum (girişler, vb. Formun içine dahil edilmedi).

Bu nedenle, bir form gönderilmesi alanları ekleyemez.

Tablo satırı ve girişler aşağıdaki gibidir:

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

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

Herhangi bir yardım harika olurdu, teşekkürler.

— Alex
kaynak

<form>içine konamaz <tr>.

— Derek 朕會功夫

Ve kapatmayı unuttun <tr>.

— Derek 朕會功夫

Formunuz için display: table-row kullanın ve table etiketini tamamen kaldırın. Cevabımı burada görebilirsiniz: stackoverflow.com/a/15600151/1038812

— Matthew

— Sandburg

Yanıtlar:

370

Bir form olan izin verilmeyen bir bir alt öğesi olarak table, tbodyya da tr. Birini koymaya çalışmak, tarayıcının formu tablodan sonra görünmesine neden olma eğilimindedir (içeriğini bırakırken - tablo satırları, tablo hücreleri, girişler, vb.).

Formun içinde bir tablonun tamamı olabilir. Bir tablo hücresinin içinde bir formunuz olabilir. Formun içinde bir tablonun parçası olamaz.

Tüm tablo çevresinde bir form kullanın. Ardından, hangi satırı işlemek (hızlı olmak) veya her satırı işlemek (toplu güncellemelere izin vermek) için tıklanan gönder düğmesini kullanın.

HTML 5, form niteliği tanıtır . Bu , tablonun dışındaki satır başına bir form sağlamanıza ve ardından belirli bir satırdaki tüm form denetimini, formunu kullanarak bu formlardan biriyle ilişkilendirmenize olanak tanır id.

— Quentin
kaynak

Tüm tablo için tek bir form kullanmaya özen gösterin, tüm alanlar boş olsalar bile sunucuya gönderilecektir. Çok büyük miktarda veri olabilir !!! Toplu / genel kullanım için lütfen bu satırdaki bir düğmeden açılan bir iletişim kutusu (tabloda olmayan form) kullanmayı tercih edin.

— Loenix

@Loenix: Tabloya, insanların bant genişliği üzerinde önemli bir yük oluşturacak kadar yeterli veri koymanız pek olası değildir (en azından tipik bir web sayfasının boyutuyla karşılaştırıldığında). Kullanıcıların bir satırı düzenlemeyi seçme ve değişikliklerini yapabilme arasında başka bir sayfa yüklemelerini gerektiren OTOH, gerçekleştirmeleri gereken can sıkıcı bir ekstra etkileşim olacaktır.

— Quentin

Orijinal soruda önerilen çözüm için bir düzenleme düğmesine ihtiyacınız yoktur.

— Quentin

Neden yasak yoktu <form>iç <table>standartlarında?

— 1234ru

@Qentin yeterince adil. Bunun yirmi yıl sonra hala açık bir nedeni olmadan durması üzücü.

— 1234ru

188

İşaretlemenizi kaydetmek istiyorsanız "form" özelliğini kullanın :

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

(* Form alanları <form> etiketi dışında)

Ayrıca ilk 2 yoruma bakın

— Vladimir
kaynak

Bu çözüm yalnızca HTML5 için geçerlidir.

— threenplusone

dahası, burada

— işe yaramaz

Form özelliğinin durumu 'inceleniyor' yani çok sabırlı olmanız gerektiği anlamına gelir developer.microsoft.com/en-us/microsoft-edge/platform/status/… Bu arada bu çoklu dolguyu deneyebilir ve sizin için çalışıp çalışmadığını görebilirsiniz stackoverflow.com/a/26696165/648484

— Souhaieb Besbes

Şimdi "geliştirilme aşamasında" gibi görünüyor ve kullanımı tamam

— user1156544

@ user1156544 Şu anda Edge'de destekleniyor, ancak IE desteklenmiyor. IE'yi desteklemeniz gerekiyorsa, bu çözümde şansınız kalmadı. Planım, iki form öğesi için iki tablo kullanmaktır (bunu yapmak zorunda olduğuma inanamıyorum). Teşekkürler Microsoft!

— Plüton

: Bir "düzenlenebilir ızgara" ie Bir form satırlarının herhangi yapmanızı sağlar yapı gibi bir tablo, kullanım CSS taklit eden TABLO etiketinin düzeni istiyorsanız display:table, display:table-rowve display:table-cell.

Tüm tablonuzu bir forma sarmanıza ve tablonuzun görünen her satırı için ayrı bir form ve tablo oluşturmanıza gerek yoktur.

Bunun yerine şunu deneyin:

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

Tüm TABLO'yu bir FORM'ye sarmakla ilgili sorun, form öğelerinin herhangi birinin ve tüm form öğelerinin gönderildiğinde gönderilmesidir (belki de istenir, ancak muhtemelen değil). Bu yöntem, her "satır" için bir form tanımlamanıza ve yalnızca gönderildiğinde bu veri satırını göndermenize olanak tanır.

FORM etiketinin bir TR etiketinin (veya TR'nin etrafında bir TR'nin) etrafına sarılmasındaki sorun, geçersiz HTML olmasıdır. FORM yine de her zamanki gibi gönderime izin verecek, ancak bu noktada DOM bozuldu. Not: FORM'nuzun veya TR'nizin alt öğelerini JavaScript ile almayı deneyin, bu beklenmedik sonuçlara yol açabilir.

IE7'nin bu CSS tablo stillerini desteklemediğini ve IE8'in "standartlar" moduna geçmek için bir doküman türüne gereksinimi olacağını unutmayın: (bunu veya eşdeğerini deneyin)

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

Display: table, display: table-row ve display: table-cell'i destekleyen diğer tüm tarayıcılar, css veri tablonuzu TABLE, TR ve TD etiketlerini kullandığınız gibi görüntülemelidir. Çoğu öyle.

Not o yapabilirsiniz başka DIV içinde satır grupları sararak da mimik Thead, TBODY, Tfoot display: table-header-group, table-row-groupve table-footer-groupsırasıyla.

NOT: Bu yöntemle yapamayacağınız tek şey colspan.

Bu resme bakın: http://jsfiddle.net/ZRQPP/

— Matthew
kaynak

Bu bahsettiğiniz için +1, colspan'ı etkinleştirmez ... ki ilk okumayı kaçırmış olmalıyım ;-)

— Johannes Rudolph

Bu yeşil işaretli cevap olmalıdır (gerçekten tablo etiketi kullanmasanız bile)

— Alessio