รูปแบบภายในตาราง

239

ฉันรวมบางฟอร์มไว้ในตาราง HTML เพื่อเพิ่มแถวใหม่และอัปเดตแถวปัจจุบัน ปัญหาที่ฉันได้รับคือเมื่อฉันตรวจสอบแบบฟอร์มในเครื่องมือ dev ของฉันฉันเห็นว่าองค์ประกอบของแบบฟอร์มถูกปิดทันทีหลังจากเปิด (อินพุต ฯลฯ ไม่รวมอยู่ในแบบฟอร์ม)

ดังนั้นการส่งแบบฟอร์มจึงไม่สามารถรวมฟิลด์ได้

แถวของตารางและอินพุตมีดังนี้:

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

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

ความช่วยเหลือใด ๆ จะดีขอขอบคุณ.

— อเล็กซ์
แหล่งที่มา

<form><tr>ไม่สามารถใส่ใน

— Derek 朕會功夫

<tr>และคุณลืมที่จะปิด

— Derek 朕會功夫

ใช้จอแสดงผล: แถวตารางสำหรับฟอร์มของคุณและวางแท็กตารางพร้อมกัน ดูคำตอบของฉันที่นี่: stackoverflow.com/a/15600151/1038812

— Matthew

มันทำไม่ได้ แต่มันใช้งานได้ ...

— Sandburg

คำตอบ:

370

รูปแบบที่จะไม่ได้รับอนุญาตให้เป็นองค์ประกอบลูกของtable, หรือtbody trความพยายามที่จะใส่มันจะทำให้เบราว์เซอร์ย้ายแบบฟอร์มไปปรากฏหลังจากตาราง (ขณะที่ปล่อยเนื้อหาไว้ - แถวตารางเซลล์ตารางอินพุต ฯลฯ - ด้านหลัง)

คุณสามารถมีทั้งตารางภายในฟอร์ม คุณสามารถมีแบบฟอร์มภายในเซลล์ตาราง คุณไม่สามารถมีส่วนหนึ่งของตารางภายในฟอร์ม

ใช้แบบฟอร์มเดียวทั่วทั้งตาราง จากนั้นใช้ปุ่มส่งที่คลิกเพื่อกำหนดแถวที่จะดำเนินการ (เพื่อให้รวดเร็ว) หรือดำเนินการทุกแถว (อนุญาตการอัปเดตจำนวนมาก)

HTML 5 แนะนำแอตทริบิวต์form นี้ช่วยให้คุณเพื่อให้รูปแบบหนึ่งต่อแถวนอกตารางidและจากนั้นเชื่อมโยงทุกการควบคุมรูปแบบในแถวให้กับหนึ่งในรูปแบบที่ใช้มัน

— เควนติน
แหล่งที่มา

ใช้ความระมัดระวังโดยใช้แบบฟอร์มเดียวสำหรับตารางทั้งหมดเขตข้อมูลทั้งหมดจะถูกส่งไปยังเซิร์ฟเวอร์แม้ว่าจะว่างเปล่าก็ตาม มันอาจเป็นข้อมูลจำนวนมาก !!! กรุณาสำหรับการใช้งานจำนวนมาก / สาธารณะต้องการใช้กล่องโต้ตอบ (แบบฟอร์มไม่อยู่ในตาราง) ที่เปิดจากปุ่มในแถวนั้น

— Loenix

@ ฟีนิกซ์: มันไม่น่าเป็นไปได้มากที่คุณจะใส่ข้อมูลมากพอในตารางเพื่อเป็นภาระที่สำคัญในแบนด์วิดธ์ของผู้คน (อย่างน้อยเมื่อเทียบกับขนาดของหน้าเว็บทั่วไป) ต้องการให้ผู้ใช้โหลดหน้าอื่นระหว่างการเลือกที่จะแก้ไขแถวและสามารถทำการเปลี่ยนแปลง OTOH ของพวกเขาจะเป็นปฏิสัมพันธ์พิเศษที่น่ารำคาญที่พวกเขาจะต้องดำเนินการ

— เควนติน

คุณไม่จำเป็นต้องมีปุ่มแก้ไขสำหรับวิธีแก้ปัญหาที่เสนอในคำถามเดิม

— เควนติน

ทำไมต้องห้าม<form>ภายใน<table>มาตรฐาน

— 1234 ถึง

@Qentin ยุติธรรมพอ น่าเสียดายที่เรื่องนี้ยังคงมีอยู่หลังจากสองทศวรรษโดยไม่มีเหตุผลที่ชัดเจน

— 1234 ถึง

188

ใช้แอตทริบิวต์ "form"หากคุณต้องการบันทึกมาร์กอัปของคุณ:

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

ดูความคิดเห็น 2 รายการแรกด้วย

— วลาดิเมีย
แหล่งที่มา

หมายเหตุโซลูชันนี้ใช้ได้กับ HTML5 เท่านั้น

— threenplusone

ยิ่งไปกว่านั้นมันจะไม่ทำงานใน internet explorer ดูข้อมูลเพิ่มเติมได้ที่นี่

— Souhaieb Besbes

สถานะของแอตทริบิวต์ของฟอร์มคือ 'อยู่ระหว่างการพิจารณา' ซึ่งหมายความว่าคุณต้องมีความอดทนเป็นอย่างมาก developer.microsoft.com/en-us/microsoft-edge/platform/status/…ขณะเดียวกันคุณสามารถลองใช้ polyfill นี้และดูว่ามันเหมาะกับคุณหรือไม่stackoverflow.com/a/26696165/648484

— Souhaieb Besbes

ดูเหมือนว่า "กำลังพัฒนา" ในตอนนี้และตกลงที่จะใช้

— user1156544

@ user1156544 ตอนนี้ Edge รองรับแล้ว แต่ไม่ใช่ IE หากคุณต้องการสนับสนุน IE เลยคุณโชคไม่ดีกับโซลูชันนี้ แผนของฉันคือใช้สองตารางสำหรับองค์ประกอบสองรูปแบบ (ฉันไม่อยากเชื่อเลยว่าจะต้องทำสิ่งนี้) ขอบคุณ Microsoft!

— พลูโต

ถ้าคุณต้องการ "ตารางที่สามารถแก้ไขได้" คือตารางเช่นโครงสร้างที่ช่วยให้คุณทำการใด ๆ แถวรูปแบบการใช้ CSS ที่เลียนแบบรูปแบบแท็กของตารางที่: display:table, และdisplay:table-rowdisplay:table-cell

ไม่จำเป็นต้องห่อทั้งตารางในฟอร์มและไม่จำเป็นต้องสร้างฟอร์มและตารางแยกต่างหากสำหรับแต่ละแถวของตาราง

ลองใช้สิ่งนี้แทน:

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

ปัญหาเกี่ยวกับการห่อทั้งตารางในรูปแบบคือองค์ประกอบใด ๆ และแบบฟอร์มทั้งหมดจะถูกส่งเมื่อส่ง (อาจเป็นที่ต้องการ แต่อาจจะไม่) วิธีนี้ช่วยให้คุณสามารถกำหนดรูปแบบสำหรับแต่ละ "แถว" และส่งเฉพาะแถวของข้อมูลที่ส่ง

ปัญหาเกี่ยวกับการตัดแท็ก FORM รอบ ๆ แท็ก TR (หรือ TR รอบ FORM) คือ HTML ที่ไม่ถูกต้อง ฟอร์มจะยังอนุญาตให้ส่งได้ตามปกติ แต่ ณ จุดนี้ DOM ใช้งานไม่ได้ หมายเหตุ: ลองรับองค์ประกอบย่อยของ FORM หรือ TR ด้วย JavaScript ซึ่งอาจนำไปสู่ผลลัพธ์ที่ไม่คาดคิด

โปรดทราบว่า IE7 ไม่สนับสนุนรูปแบบตาราง CSS เหล่านี้และ IE8 จะต้องมีการประกาศ doctype เพื่อให้เข้าสู่โหมด "มาตรฐาน": (ลองใช้สิ่งนี้หรือสิ่งที่เทียบเท่า)

<!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 และ display: table-cell ควรแสดงตารางข้อมูล css ของคุณเหมือนกับที่คุณใช้ถ้าคุณใช้แท็ก TABLE, TR และ TD ส่วนใหญ่ทำ

ทราบว่าคุณสามารถ THEAD ยังเลียนแบบ TBODY, TFOOT โดยการตัดกลุ่มแถวใน DIV อีกด้วยdisplay: table-header-group, table-row-groupและtable-footer-groupตามลำดับ

หมายเหตุ:สิ่งเดียวที่คุณไม่สามารถทำได้ด้วยวิธีนี้คือ colspan

ลองดูภาพประกอบนี้: http://jsfiddle.net/ZRQPP/

— แมทธิว
แหล่งที่มา

+1 สำหรับการกล่าวถึงสิ่งนี้ไม่เปิดใช้งาน colspan ... ซึ่งฉันต้องพลาดการอ่านครั้งแรกผ่าน ;-)

— โยฮันเนสรูดอล์ฟ

นั่นควรเป็นคำตอบที่ตรวจสอบสีเขียว (แม้ว่าจะไม่ได้ใช้แท็กตารางจริง ๆ )

— Alessio