jQuery ลบแถวของตารางทั้งหมดยกเว้นอันแรก

280

ใช้ jQuery ฉันจะลบแถวทั้งหมดในตารางได้อย่างไรยกเว้นแถวแรก นี่เป็นครั้งแรกที่ฉันใช้ตัวเลือกดัชนี หากฉันเข้าใจตัวอย่างถูกต้องสิ่งต่อไปนี้ควรใช้ได้:

$(some table selector).remove("tr:gt(0)");

ที่ฉันจะอ่านเป็น "ห่อบางตารางในวัตถุ jQuery แล้วลบองค์ประกอบ 'tr' ทั้งหมด (แถว) ที่ดัชนีองค์ประกอบของแถวดังกล่าวมากกว่าศูนย์" ในความเป็นจริงมันรันโดยไม่สร้างข้อผิดพลาด แต่ไม่ลบแถวใด ๆ ออกจากตาราง

ฉันหายไปอะไรและฉันจะแก้ไขได้อย่างไร แน่นอนฉันสามารถใช้จาวาสคริปต์ได้โดยตรง แต่ฉันสนุกมากกับ jQuery ที่ฉันต้องการแก้ไขโดยใช้ jQuery

jquery jquery-selectors

— เคนพอล
แหล่งที่มา

ใครรู้ว่าทำไมรหัสที่กำหนดไม่ทำงาน? ฉันยังมีปัญหาเมื่อใส่ตัวเลือกตัวกรองในฟังก์ชั่นลบ

— Leto

1

ตอนนี้ฉันเข้าใจดีขึ้นแล้วโค้ดด้านบนใช้งานไม่ได้เนื่องจาก $ (ตัวเลือกตารางบางตัว) เลือกเฉพาะองค์ประกอบตารางไม่ใช่องค์ประกอบย่อยใด ๆ ดังนั้นจึงไม่มีองค์ประกอบ 'tr' สำหรับฟังก์ชั่นการลบเพื่อค้นหา การใช้ฟังก์ชั่น find จะค้นหาการจับคู่ระหว่างลูกขององค์ประกอบตาราง

— Ken Paul

ดูคำตอบนี้stackoverflow.com/questions/4831334/…

— แต่ง Proxy

522

สิ่งนี้น่าจะใช้ได้:

$(document).ready(function() {
   $("someTableSelector").find("tr:gt(0)").remove();
});

— Strelok
แหล่งที่มา

2

ถ้าฉันต้องการลบแถวของตารางยกเว้นอันแรกและอันที่สอง

18

@ user594166 ใช้ gt (1) แทน gt (0)

— christianvuerings

6

จากเว็บไซต์ jQuery:

Because :gt() is a jQuery extension and not part of the CSS specification, queries using :gt() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").slice(index) instead.

ฉันอยากจะแนะนำให้ใช้ $ ("# mytable> tr"). slice (1) .remove ();

— Chris_F

รหัสของคุณใช้ไม่ได้สำหรับฉัน .. ฉันเปลี่ยน gt (0) เป็น gt (1) และสิ่งนี้ใช้ได้

— saadk

113

ฉันคิดว่านี่เป็นเจตนาที่อ่านง่ายกว่า:

$('someTableSelector').children( 'tr:not(:first)' ).remove();

การใช้ลูก ๆ จะดูแลเคสที่แถวแรกมีตารางโดย จำกัด ความลึกของการค้นหา

หากคุณมีองค์ประกอบ TBODY คุณสามารถทำได้:

$("someTableSelector > tbody:last").children().remove();

หากคุณมีองค์ประกอบ THEAD หรือ TFOOT คุณจะต้องทำสิ่งที่แตกต่าง

— tvanfosson
แหล่งที่มา

2

Re: ทำอะไรที่แตกต่างออกไป .... สิ่งนี้ได้ผล:$('someTableSelector > tbody:last > tr:not(:first)').remove();

— Cheeso

เพื่อลบเด็กทั้งหมดฉันต้องใช้เครื่องหมายคำพูดคู่ ไม่รู้จักเป็นอย่างอื่น $("#tasks").children().remove();

— Doomsknight

40

อีกวิธีหนึ่งในการบรรลุเป้าหมายนี้คือการใช้ฟังก์ชั่น empty () ของ jQuery กับองค์ประกอบ thead และ tbody ในตารางของคุณ

ตัวอย่างของตาราง:

<table id="tableId">
<thead>
    <tr><th>Col1</th><th>Col2</th></tr>
</thead>
<tbody>
    <tr><td>some</td><td>content</td></tr>
    <tr><td>to be</td><td>removed</td></tr>
</tbody>
</table>

และคำสั่ง jQuery:

$("#tableId > tbody").empty();

สิ่งนี้จะลบทุกแถวที่มีอยู่ในองค์ประกอบ tbody ของตารางของคุณและรักษาองค์ประกอบ thead ที่ส่วนหัวของคุณควรอยู่ มันจะมีประโยชน์เมื่อคุณต้องการรีเฟรชเฉพาะเนื้อหาของตาราง

— jpmorin
แหล่งที่มา

3

นี่อาจเป็นไปได้ที่จะมีประสิทธิภาพที่ดีที่สุดของโซลูชั่นทั้งหมดที่นำเสนอและสง่างามมาก

— the.jxc

38

ถ้าเป็นฉันฉันอาจจะต้มมันให้เป็นตัวเลือกเดียว:

$('someTableSelector tr:not(:first)').remove();

— Dave Ward
แหล่งที่มา

เห็นด้วย แต่ยิ่งกว่านั้นจะต้องพูดว่า: $ ('someTableSelector tbody tr: ไม่ (: ก่อน)'). ลบ ();

— Marco Muciño

30

ตัวเลือกของคุณไม่จำเป็นต้องอยู่ในการลบของคุณ

ควรมีลักษณะดังนี้:

$("#tableID tr:gt(0)").remove();

ซึ่งหมายความว่าเลือกทุกแถวยกเว้นแถวแรกในตารางที่มี ID ของ tableID และลบออกจาก DOM

— CMPalmer
แหล่งที่มา

ฉันเห็นด้วย. ในกรณีของฉันวัตถุตารางได้ถูกเลือกไว้ก่อนหน้านี้

— เคนพอล

ในการลบแถวทั้งหมดยกเว้นแถวแรก: - $ ("# tableID tr: gt (1)"). remove ();

— Biki

9

$('#table tr').slice(1).remove();

ฉันจำได้ว่าการเจอ 'slice' นั้นเร็วกว่าวิธีอื่นทั้งหมดดังนั้นเพียงวางไว้ที่นี่

— Makubex
แหล่งที่มา

บางคนก็ไม่ได้ทำงานสำหรับฉัน คำตอบที่ยอมรับดูเหมือนจะทำเคล็ดลับ

— ankush981

gtเลิกใช้แล้วนี่เป็นคำตอบที่ดีที่สุด

— CyberEd

7

พิจารณาตารางที่มีรหัสtbl: รหัส jQuery จะเป็น:

$('#tbl tr:not(:first)').remove();

— Sanket Utekar
แหล่งที่มา

3

หากต้องการลบแถวทั้งหมดยกเว้นแถวแรก (ยกเว้นส่วนหัว) ให้ใช้รหัสด้านล่าง:

$("#dataTable tr:gt(1)").remove();

— Biki
แหล่งที่มา

1

วิธีที่ง่ายที่สุด:

$("#mytable").find($("tr")).slice(1).remove()

อ้างอิง -First ตาราง
รับคำรายชื่อขององค์ประกอบและเชือดมันและลบองค์ประกอบที่เลือกของรายการ

— Pytholabs
แหล่งที่มา

0

- เพราะนี่เป็นคำตอบที่ช้ามาก

วิธีที่ง่ายที่สุดที่ฉันพบว่าลบแถวใด ๆ (และแถวอื่น ๆ ผ่านการทำซ้ำ) คือสิ่งนี้

$ ( '# ROWID', '# รหัสตาราง') ลบ ().

ที่เหลือก็ง่าย

— Farjad
แหล่งที่มา

0

$ ("# p-items"). find ('tr.row-items') .remove ();

— Pramod
แหล่งที่มา

0

ห่อในฟังก์ชั่น:

function remove_rows(tablename) { 
    $(tablename).find("tr:gt(0)").remove();        
}

จากนั้นเรียกมันว่า:

remove_rows('#table1');
remove_rows('#table2');

— PodTech.io
แหล่งที่มา

0

มันทำงานได้อย่างสมบูรณ์แบบ

$("#myTable tbody").children( 'tr:not(:first)' ).html("");

— Infolet.org
แหล่งที่มา

ใช่นั่นโพสต์ไปแล้วหลายครั้งแล้ว มีอะไรใหม่

— Nico Haase

0

วิธีนี้ใช้ได้ผลในกรณีของฉันและใช้งานได้ดี

$("#compositeTable").find("tr:gt(1)").remove();

— saadk
แหล่งที่มา