ลบแถวทั้งหมดในตาราง HTML

ฉันจะลบแถวทั้งหมดของตาราง HTML ได้อย่างไรยกเว้นไฟล์ <th>ใช้ Javascript และไม่ต้องวนซ้ำแถวทั้งหมดในตาราง ฉันมีตารางขนาดใหญ่มากและฉันไม่ต้องการหยุด UI ในขณะที่ฉันวนรอบแถวเพื่อลบออก

เก็บ<th>แถวไว้ในแถว<thead>และอีกแถวหนึ่ง<tbody>จากนั้นแทนที่<tbody>ด้วยใหม่ที่ว่างเปล่า

กล่าวคือ

var new_tbody = document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody)

สิ่งนี้จะลบแถวทั้งหมด:

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

หยาบมาก แต่ก็ใช้ได้เช่นกัน:

var Table = document.getElementById("mytable");
Table.innerHTML = "";

สิ่งที่ควรทราบเกี่ยวกับระวังข้อผิดพลาดทั่วไป :

หากดัชนีเริ่มต้นของคุณเป็น 0 (หรือดัชนีจากจุดเริ่มต้น) รหัสที่ถูกต้องคือ:

var tableHeaderRowCount = 1;
var table = document.getElementById('WRITE_YOUR_HTML_TABLE_NAME_HERE');
var rowCount = table.rows.length;
for (var i = tableHeaderRowCount; i < rowCount; i++) {
    table.deleteRow(tableHeaderRowCount);
}

หมายเหตุ

1. อาร์กิวเมนต์สำหรับ deleteRow ได้รับการแก้ไข
สิ่งนี้จำเป็นเนื่องจากเมื่อเราลบแถวจำนวนแถวจะลดลง
ได้แก่ ; เมื่อถึงเวลาที่ฉันไปถึง (rows.length - 1) หรือก่อนที่แถวนั้นจะถูกลบไปแล้วดังนั้นคุณจะมีข้อผิดพลาด / ข้อยกเว้นบางอย่าง (หรือไม่มีเสียง)

2. rowCount ถูกนำมาก่อนที่ for loop จะเริ่มขึ้น เนื่องจากเมื่อเราลบ "table.rows.length" จะยังคงเปลี่ยนแปลงอยู่ดังนั้นคุณมีปัญหาอีกครั้งที่จะลบเฉพาะแถวคี่หรือคู่เท่านั้น

หวังว่าจะช่วยได้

นี่เป็นคำถามเก่า แต่เมื่อเร็ว ๆ นี้ฉันมีปัญหาที่คล้ายกัน
ฉันเขียนรหัสนี้เพื่อแก้ปัญหา:

var elmtTable = document.getElementById('TABLE_ID_HERE');
var tableRows = elmtTable.getElementsByTagName('tr');
var rowCount = tableRows.length;

for (var x=rowCount-1; x>0; x--) {
   elmtTable.removeChild(tableRows[x]);
}

ซึ่งจะลบแถวทั้งหมดยกเว้นแถวแรก

ไชโย!

สมมติว่าคุณมีตารางเพียงตารางเดียวเพื่อให้คุณสามารถอ้างอิงได้ด้วยประเภทเท่านั้น หากคุณไม่ต้องการลบส่วนหัว:

$("tbody").children().remove()

มิฉะนั้น:

$("table").children().remove()

หวังว่ามันจะช่วยได้!

หากคุณสามารถประกาศIDสำหรับtbodyคุณสามารถเรียกใช้ฟังก์ชันนี้ได้:

var node = document.getElementById("tablebody");
while (node.hasChildNodes()) {
  node.removeChild(node.lastChild);
}

ฉันต้องการลบแถวทั้งหมดยกเว้นแถวแรกและโซลูชันที่โพสต์โดย @strat แต่นั่นส่งผลให้เกิดข้อยกเว้นที่ไม่ถูกตรวจจับ (การอ้างอิงโหนดในบริบทที่ไม่มีอยู่) สิ่งต่อไปนี้ใช้ได้ผลสำหรับฉัน

var myTable = document.getElementById("myTable");
var rowCount = myTable.rows.length;
for (var x=rowCount-1; x>0; x--) {
   myTable.deleteRow(x);
}

รหัสให้ด้านล่างใช้งานได้ดี จะลบแถวทั้งหมดยกเว้นแถวส่วนหัว ดังนั้นโค้ดนี้ t จริงๆ

$("#Your_Table tr>td").remove();

สิ่งนี้จะใช้การลบการวนซ้ำในตาราง HTML ในเนทีฟ

document.querySelectorAll("table tbody tr").forEach(function(e){e.remove()})

หากคุณไม่ต้องการลบthและเพียงแค่ต้องการลบแถวด้านในการดำเนินการนี้จะทำงานได้อย่างสมบูรณ์

var tb = document.getElementById('tableId');
  while(tb.rows.length > 1) {
  tb.deleteRow(1);
}

แล้วสิ่งนี้ล่ะ:

เมื่อหน้าเว็บโหลดครั้งแรกให้ดำเนินการดังนี้:

var myTable = document.getElementById("myTable");
myTable.oldHTML=myTable.innerHTML;

จากนั้นเมื่อคุณต้องการล้างตาราง:

myTable.innerHTML=myTable.oldHTML;

ผลลัพธ์จะเป็นแถวส่วนหัวของคุณหากนั่นคือทั้งหมดที่คุณเริ่มต้นประสิทธิภาพจะเร็วกว่าการวนซ้ำอย่างมาก

การกำหนด id ให้กับแท็ก tbody กล่าวคือ. หลังจากนี้บรรทัดต่อไปนี้ควรเก็บส่วนหัว / ส่วนท้ายของตารางไว้และลบแถวทั้งหมดออก

document.getElementById("yourID").innerHTML="";

และถ้าคุณต้องการให้ทั้งตาราง (ส่วนหัว / แถว / ส่วนท้าย) ลบออกให้ตั้งค่า id ที่ระดับตารางเช่น

หากคุณมี<th>แถวน้อยกว่าแถวที่ไม่ใช่<th>มากคุณสามารถรวบรวม<th>แถวทั้งหมดเป็นสตริงลบตารางทั้งหมดแล้วเขียน<table>thstring</table>ตำแหน่งของตาราง

แก้ไข: โดยที่ชัดเจน "thstring" คือ html สำหรับแถวทั้งหมดของ<th>s

ใช้งานได้ใน IE โดยไม่ต้องประกาศ var สำหรับตารางและจะลบแถวทั้งหมด:

for(var i = 0; i < resultsTable.rows.length;)
{   
   resultsTable.deleteRow(i);
}

กำหนดรหัสหรือชั้นเรียนให้กับคนของคุณ

document.querySelector("#tbodyId").remove();
document.querySelectorAll(".tbodyClass").remove();

คุณสามารถตั้งชื่อ ID หรือระดับของคุณวิธีที่คุณต้องการไม่จำเป็นต้องหรือ#tbodyId.tbodyClass

นี่เป็นรหัสง่ายๆที่ฉันเพิ่งเขียนเพื่อแก้ปัญหานี้โดยไม่ต้องลบแถวส่วนหัว (อันแรก)

var Tbl = document.getElementById('tblId');
while(Tbl.childNodes.length>2){Tbl.removeChild(Tbl.lastChild);}

หวังว่าจะเหมาะกับคุณ !!.

เพียงแค่ล้างตัวตาราง

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

const table = document.querySelector ('ตาราง'); table.innerHTML === ''? null: table.innerHTML = ''; จาวาสคริปต์ข้างต้นใช้งานได้ดีสำหรับฉัน ตรวจสอบเพื่อดูว่าตารางมีข้อมูลหรือไม่จากนั้นล้างข้อมูลทั้งหมดรวมทั้งส่วนหัวด้วย