ฉันมีตาราง HTML ที่เต็มไปด้วยแถวจำนวนหนึ่ง
ฉันจะลบแถวทั้งหมดออกจากตารางได้อย่างไร
ฉันมีตาราง HTML ที่เต็มไปด้วยแถวจำนวนหนึ่ง
ฉันจะลบแถวทั้งหมดออกจากตารางได้อย่างไร
คำตอบ:
ใช้. remove ()
$("#yourtableid tr").remove();
หากคุณต้องการเก็บข้อมูลไว้ใช้ในอนาคตแม้ว่าจะลบออกแล้วคุณสามารถใช้ . detach ()
$("#yourtableid tr").detach();
หากแถวเป็นลูกของตารางคุณสามารถใช้ตัวเลือกลูกแทนตัวเลือกลูกหลานได้เช่น
$("#yourtableid > tr").remove();
หากคุณต้องการล้างข้อมูล แต่เก็บส่วนหัวไว้:
$('#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>
เร็วกว่าการลบทีละเล็กน้อย:
$('#myTable').empty()
เทคนิคนี้จะลบthead
, tfoot
และtbody
องค์ประกอบเกินไป
ฉันต้องการสิ่งนี้:
$('#myTable tbody > tr').remove();
จะลบแถวทั้งหมดยกเว้นส่วนหัว
ตัวเลือกนิวเคลียร์:
$("#yourtableid").html("");
#yourtableid
ภายในทุกอย่างทำลายของ ระวังตัวเลือกของคุณเพราะมันจะทำลายhtml ใด ๆในตัวเลือกที่คุณผ่าน!
$("#employeeTable td").parent().remove();
การดำเนินการนี้จะลบtr
การมี td
บุตรทั้งหมดออก คือทุกแถวยกเว้นส่วนหัวจะถูกลบ
การดำเนินการนี้จะลบแถวทั้งหมดที่เป็นของร่างกายจึงทำให้ส่วนหัวและเนื้อหาไม่เสียหาย
$("#tableLoanInfos tbody tr").remove();
<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();
$('#myTable > tr').remove();
มีโต๊ะแบบนี้ (มีส่วนหัวและตัว)
<table id="myTableId">
<thead>
</thead>
<tbody>
</tbody>
</table>
ลบทุก tr ที่มีผู้ปกครองเรียกว่า tbody ภายใน #tableId
$('#tableId tbody > tr').remove();
และในทางกลับกันหากคุณต้องการเพิ่มลงในตารางของคุณ
$('#tableId tbody').append("<tr><td></td>....</tr>");
tbody
องค์ประกอบโดยนัยรอบ ๆtr
องค์ประกอบ