jQuery: นับจำนวนแถวในตาราง


คำตอบ:


955

ใช้ตัวเลือกที่จะเลือกแถวทั้งหมดและใช้ความยาว

var rowCount = $('#myTable tr').length;

หมายเหตุ: วิธีการนี้ยังนับ trs ทั้งหมดของทุกตารางที่ซ้อนกัน!


11
$ ('# myTable tr'). size () จะคืนค่าเดิม
Garry Shutler

31
@Garry - เอกสารระบุว่าต้องการความยาวมากกว่าขนาด () เพราะเร็วกว่า
tvanfosson

12
.size () โทร. ความยาวภายใน
redsquare

2
มันมีคุณสมบัติความยาวเพราะมันเป็นอาร์เรย์ ฉันไม่ทราบประวัติของ jQuery เพียงพอที่จะทราบว่าวัตถุ jQuery ขยายอาร์เรย์อยู่เสมอหรือไม่
tvanfosson

67
สิ่งนี้จะนับ tr ใน thead ... $ ('# myTable tbody tr') ความยาว; จะนับเฉพาะในร่างโต๊ะเท่านั้น
เดฟลอเรนซ์

178

หากคุณใช้<tbody>หรือ<tfoot>ในตารางของคุณคุณจะต้องใช้ไวยากรณ์ต่อไปนี้หรือคุณจะได้รับค่าที่ไม่ถูกต้อง:

var rowCount = $('#myTable >tbody >tr').length;

1
ฉันใช้ <tbody> แต่ฉันได้รับค่าเดียวกัน
เครเกอร์

1
ใช้ $ ('# myTable> tbody: last> tr'). length;
Riccardo Bassilichi

7
@DevlshOne นั่นไม่ใช่ความจริงความยาวไม่เป็นศูนย์ตรวจสอบเอกสาร: api.jquery.com/length
Mike

1
เมื่อคุณมีตารางที่ซ้อนกันสิ่งนี้จะนับเฉพาะแถวในตารางที่ระบุซึ่งเป็นสิ่งที่ฉันต้องการ
GilShalit

1
@ user12379095 สิ่งนี้: stackoverflow.com/questions/32101764/…
AntonChanning

49

หรืออีกทางหนึ่ง ...

var rowCount = $('table#myTable tr:last').index() + 1;

jsFiddle DEMO

สิ่งนี้จะช่วยให้มั่นใจได้ว่าจะไม่นับแถวตารางที่ซ้อนกัน


โอ้เพราะดัชนีกลับ -1 ฉลาด.
ซามูเอลเอ็ดวินวอร์ด

1
ขอบคุณ มันมีอยู่ไม่มากและอยู่ไกล แต่โซลูชันที่ชาญฉลาดจะหลุดมือไปเรื่อย ๆ
DevlshOne

var rowCount = $('table#myTable tr:last').index() + 1;
Ouadie

ละเว้น<thead>แถวและแถวของตารางที่ซ้อนกัน ดี jsfiddle.net/6v67a/1576
GreeKatrina

ถ้า Last <td>มีตารางด้านในมันจะส่งกลับจำนวนแถวของตารางนั้น !! jsfiddle.net/6v67a/1678
Shaunak Shukla

32

ดีฉันได้รับแถว attr จากตารางและเพิ่มความยาวสำหรับชุดสะสม:

$("#myTable").attr('rows').length;

ฉันคิดว่า jQuery ทำงานได้น้อยลง


2
+1 - ดีสำหรับสถานการณ์ที่คุณผ่านองค์ประกอบที่มีตารางเช่น var rowCount = $ (องค์ประกอบ) .attr ('แถว') ความยาว;
นิโคลัสเมอเรย์

9
ใช้ JQuery v1.9.0 และฉันต้องใช้ prop () เพื่อเข้าถึง 'rows': $ ("# myTable"). prop ('rows') length. (Chromium 24)
nvcnvn

16

นี่คือสิ่งที่ฉันใช้:

//Helper function that gets a count of all the rows <TR> in a table body <TBODY>
$.fn.rowCount = function() {
    return $('tr', $(this).find('tbody')).length;
};

การใช้:

var rowCount = $('#productTypesTable').rowCount();

ฟังก์ชั่นที่ดีมาก @Ricky G มีประโยชน์ในการทำหลายสิ่งหลายอย่างตัวอย่างเช่นฟังก์ชั่นนี้สามารถเรียกใช้สำหรับ html ที่สร้างจากแบ็กเอนด์แทน dom ได้เช่นกันขอบคุณ
Dhaval dave


8

ลองอันนี้ถ้ามี tbody

ไม่มีส่วนหัว

$("#myTable > tbody").children.length

หากมีส่วนหัวแล้ว

$("#myTable > tbody").children.length -1

สนุก!!!


1
มันหายไป () หลังจาก chidlren => $ ("# myTable> tbody"). children (). length
DrB

1
ในส่วนหัวควรจะปิดล้อมซึ่งควรจะมาก่อน<thead> <tbody>ดังนั้นไม่จำเป็นต้องใช้ -1 หากตารางได้รับการออกแบบอย่างถูกต้องตามมาตรฐาน
ilpelle

ปัญหาคือเมื่อ datatable ไม่มีบันทึกมันแสดงความยาวเป็น 1 เพราะ DataTable ทำให้แถวว่างกับ class "แปลก" ใน DataTable .....
Syed Ali

ฉันมีตารางแบบไดนามิกใน UserScript และนี่เป็นทางออกเดียวที่ใช้งานได้
brasofilo

7

ฉันต้องการวิธีการทำสิ่งนี้ในการส่งคืน AJAX ดังนั้นฉันจึงเขียนบทความนี้:

<p id="num_results">Number of results: <span></span></p>

<div id="results"></div>

<script type="text/javascript">
$(function(){
    ajax();
})

//Function that makes Ajax call out to receive search results
var ajax = function() {
    //Setup Ajax
    $.ajax({
        url: '/path/to/url', //URL to load
        type: 'GET', //Type of Ajax call
        dataType: 'html', //Type of data to be expected on return
        success: function(data) { //Function that manipulates the returned AJAX'ed data
            $('#results').html(data); //Load the data into a HTML holder
            var $el = $('#results'); //jQuery Object that is holding the results
            setTimeout(function(){ //Custom callback function to count the number of results
                callBack($el);
            });
        }
    });
}

//Custom Callback function to return the number of results
var callBack = function(el) {
    var length = $('tr', $(el)).not('tr:first').length; //Count all TR DOM elements, except the first row (which contains the header information)
    $('#num_results span').text(length); //Write the counted results to the DOM
}
</script>

เห็นได้ชัดว่านี่เป็นตัวอย่างรวดเร็ว แต่อาจเป็นประโยชน์


6

ฉันพบว่ามันทำงานได้ดีจริงๆถ้าคุณต้องการนับแถวโดยไม่นับแถวที่และแถวใด ๆ จากตารางภายในตาราง:

var rowCount = $("#tableData > tbody").children().length;

จะปรับเปลี่ยนเพื่อนับคอลัมน์ได้อย่างไร
ePandit


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.