jquery ตารางที่ชัดเจน


คำตอบ:


165

ใช้. remove ()

$("#yourtableid tr").remove();

หากคุณต้องการเก็บข้อมูลไว้ใช้ในอนาคตแม้ว่าจะลบออกแล้วคุณสามารถใช้ . detach ()

$("#yourtableid tr").detach();

หากแถวเป็นลูกของตารางคุณสามารถใช้ตัวเลือกลูกแทนตัวเลือกลูกหลานได้เช่น

$("#yourtableid > tr").remove();

16
ระวังตัวสุดท้าย: เบราว์เซอร์ส่วนใหญ่จะเพิ่มtbodyองค์ประกอบโดยนัยรอบ ๆtrองค์ประกอบ
nickf

99

หากคุณต้องการล้างข้อมูล แต่เก็บส่วนหัวไว้:

$('#myTableId tbody').empty();

ตารางจะต้องจัดรูปแบบในลักษณะนี้:

<table id="myTableId">
    <thead>
        <tr>
            <th>header1</th><th>header2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>data1</td><td>data2</td>
        </tr>
    </tbody>
</table>

มันใช้งานได้ แต่นี่เป็นการลบตัว 'tbody' ออกด้วยตัว 'tr' ทั้งหมดที่อยู่ข้างใน
Hakan Fıstık

คุณพูดถูก @HakamFostok ฉันแก้ไขคำตอบของฉันเป็นใช้ empty () แทน
HoffZ

41

เร็วกว่าการลบทีละเล็กน้อย:

$('#myTable').empty()

เทคนิคนี้จะลบthead, tfootและtbodyองค์ประกอบเกินไป



12

ตัวเลือกนิวเคลียร์:

$("#yourtableid").html("");

#yourtableidภายในทุกอย่างทำลายของ ระวังตัวเลือกของคุณเพราะมันจะทำลายhtml ใด ๆในตัวเลือกที่คุณผ่าน!


2
+1 สำหรับนิวเคลียร์ :) แต่ควรเข้าใจว่าไม่ใช่สไตล์ที่ 'ดีที่สุด' :) ฉันไม่แนะนำโดยทั่วไป
Budda

ฮ่า ๆ. เห็นด้วย ฉันได้ใช้วิธีการนี้โดยเฉพาะอย่างยิ่งในอดีตสำหรับความเร็วและการแก้ไขสถานการณ์ที่ยากลำบาก มีการใช้งานที่ถูกต้องในขอบเขตของแอปพลิเคชัน JQuery
KevinDeus

11
$("#employeeTable td").parent().remove();

การดำเนินการนี้จะลบtrการมี tdบุตรทั้งหมดออก คือทุกแถวยกเว้นส่วนหัวจะถูกลบ


นี่เป็นเพียงคนเดียวที่เหมาะกับฉัน ลบทั้งหมดยกเว้นส่วนหัว ...
Elbert Villarreal

6

การดำเนินการนี้จะลบแถวทั้งหมดที่เป็นของร่างกายจึงทำให้ส่วนหัวและเนื้อหาไม่เสียหาย

$("#tableLoanInfos tbody tr").remove();

1
<table id="myTable" class="table" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody id="tblBody">

    </tbody>
</table>

และลบ:

$("#tblBody").empty();


0

มีโต๊ะแบบนี้ (มีส่วนหัวและตัว)

<table id="myTableId">
    <thead>
    </thead>
    <tbody>
   </tbody>
</table>

ลบทุก tr ที่มีผู้ปกครองเรียกว่า tbody ภายใน #tableId

$('#tableId tbody > tr').remove();

และในทางกลับกันหากคุณต้องการเพิ่มลงในตารางของคุณ

$('#tableId tbody').append("<tr><td></td>....</tr>");
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.