Đầu tiên hãy để tôi chỉ cho bạn những gì đang xảy ra. Giả sử có một bảng HTML có 3 hàng. Xem mã HTML bên dưới //Code Starts
<table id='tblData' border='1'>
<tr>
<td> Cell 1 </td>
</tr>
<tr>
<td> Cell 2 </td>
</tr>
<tr>
<td> Cell 3 </td>
</tr>
</table>
//Code Ends
Khi bạn sử dụng mã jQuery bên dưới để tìm ra bảng con, thì nó sẽ cảnh báo là 1. Và đừng lo lắng không có gì sai với mã //Code Starts
$(document).ready(function(){
alert($('#tblData').children().length);
});
//Code Ends
Xem kết quả bên dưới Tôi đã tự hỏi rằng những gì có thể là lý do. Tại sao nó lại cho tôi tính là 1, thay vì 3. Nhưng cuối cùng tôi cũng tìm ra lý do. Nếu bạn sử dụng mã jQuery bên dưới, thì bạn sẽ nhận được số tr(hàng của bảng) là 3 //Code Starts
$(document).ready(function(){
alert($('#tblData').children().children.length);
});
//Code Ends
Well, the reason is that the way DOM parse the elements. If it doesn't find the |
tag to the table and that's why count is returned was 1. But when you use $('#tblData').children().children.length), then you are actually telling jQuery to use path (table > tbody > tr).Xem ảnh chụp màn hình bên dưới của DOM. Nó thêm thẻ tbody
Xem kết quả bên dưới
Đoạn mã trên hoạt động, nhưng nó không hiệu quả. cách tốt hơn là
//Code Starts
var child = $('#tblData tbody').children().length;
//Code Ends
HOẶC
//Code Starts
var child = $('#tblData tr').length;
//Code Ends
Bởi vì trong cả hai mã, chúng tôi đang xác định bộ chọn một cách hiệu quả và yêu cầu jQuery xem xét một cách rõ ràng phần được chỉ định của trang, điều này nhanh hơn nhiều
jQuery. Đếm số hàng và số cột trong bảngCập nhật lần cuối vào ngày 19 tháng 8 năm 2022 21. 51. 35 (UTC/GMT +8 giờ)
jQuery Bài tập thực hành Phần I. Bài tập-23
Đếm số hàng và cột trong bảng bằng jQuery
Giải pháp mẫu
Mã HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-git.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Count number of rows and columns in a table using jQuery.</title>
</head>
<body>
<table id="table1">
<tr>
<th>Tools</th>
<th>Description</th>
</tr>
<tr>
<td>phpMyAdmin</td>
<td>Third party, Free, Web based </td>
</tr>
<tr>
<td>HeidiSQL</td>
<td>Third party, Free, For Windows </td>
</tr>
<tr>
<td>Adminer</td>
<td>Third party, Free</td>
</tr>
<tr>
<td>DBEdit </td>
<td>Third party, Free</td>
</tr>
<tr>
<td>dbForge GUI Tools</td>
<td>Third party, Free</td>
</tr>
<tr>
<td> Navicat </td>
<td>Third party, Commercial </td>
</tr>
<tr>
<td>Maatkit</td>
<td>Third party, Command line, free </td>
</tr>
<tr>
<td>MySQL Sandbox</td>
<td>Third party, Command line, free</td>
</tr>
<tr>
<td>SQLBuddy </td>
<td> A free Web-based front end, developed in PHP.</td>
</tr>
<tr>
<td>SQLyog </td>
<td>Commercial, but a free 'community' edition is available.</td>
</tr>
<tr>
<td>Toad for MySQL </td>
<td>Third party, free from Quest Software</td>
</tr>
</table>
</body>
</html>
Mã JavaScript
$.fn.rowCount = function() {
return $('tr', $(this).find('tbody')).length;
};
$.fn.columnCount = function() {
return $('th', $(this).find('tbody')).length;
};
var
rowctr = $('#table1').rowCount();
var colctr = $('#table1').columnCount();
console.log('No of Rows:'+rowctr);
console.log('No of Columns:'+colctr);
Xem Bút jquery-practical-exercise-23 của w3resource (@w3resource) trên CodePen
Đóng góp mã và nhận xét của bạn thông qua Disqus
Trước. Đếm số hàng và cột trong bảng bằng jQuery.
Tiếp theo. Cách lấy văn bản textarea bằng jQuery.
Mức độ khó của bài tập này là gì?
Dễ dàng trung bình khóKiểm tra kỹ năng Lập trình của bạn với bài kiểm tra của w3resource
- bài tập. Top 16 chủ đề phổ biến nhất hàng tuần
- Bài tập SQL, Thực hành, Lời giải - THAM GIA
- Bài tập, Thực hành, Giải pháp SQL - SUBQUERIES
- JavaScript cơ bản - Bài tập, Thực hành, Lời giải
- Mảng Java. Bài tập, Luyện tập, Lời giải
- Bài Tập Lập Trình C, Thực Hành, Lời Giải. Tuyên bố có điều kiện
- Cơ sở dữ liệu nhân sự - SORT FILTER. Bài tập, Luyện tập, Lời giải
- Bài Tập Lập Trình C, Thực Hành, Lời Giải. Sợi dây
- Kiểu dữ liệu Python. Từ điển - Bài tập, Thực hành, Lời giải
- Câu đố lập trình Python - Bài tập, Thực hành, Giải pháp
- Mảng C++. Bài tập, Luyện tập, Lời giải
- Câu lệnh điều kiện và vòng lặp JavaScript - Bài tập, Thực hành, Lời giải
- Thuật toán cơ bản C# Sharp. Bài tập, Luyện tập, Lời giải
- Python Lambda - Bài tập, Thực hành, Giải pháp
- Khung dữ liệu Python Pandas. Bài tập, Luyện tập, Lời giải
- Công cụ chuyển đổi
- JavaScript. Xác thực biểu mẫu HTML
Làm cách nào để lấy số lượng hàng trong bảng trong JavaScript?
Bộ sưu tập các hàng trong bảng .
Tìm xem có bao nhiêu hàng trong một bảng. getElementById("myTable"). .
[index] Alert the innerHTML of the first
element (index 0) in the table: .. . item(index) Alert the innerHTML of the first
element (index 0) in the table: .. . tênItem(id).
Thay đổi nội dung ô đầu tiên của bảng
Làm cách nào để lấy số cột trong bảng trong JavaScript?
Thuộc tính độ dài được sử dụng trên các phần tử đã chọn để lấy số hàng. Để đếm số cột, bộ chọn “#Table_Id tr th” được sử dụng . Nó chọn tất cả số phần tử
Làm cách nào để đếm bằng JavaScript?
Các ví dụ khác .
bảng điều khiển cuộc gọi. đếm() hai lần. bảng điều khiển. đếm(); . đếm();
bảng điều khiển cuộc gọi. đếm hai lần, với một nhãn. bảng điều khiển. đếm("MyLabel"); . đếm("MyLabel");
Để xóa nhãn, hãy sử dụng "" làm tham số. bảng điều khiển. đếm(""); . đếm("");
Làm cách nào để lấy giá trị ô hàng của bảng trong JavaScript?
Nhận tất cả giá trị ô trong bảng bằng JavaScript .
// Lấy phần tử của bảng let myTable = document. getElementById('bảng mục tiêu'); . .
hãy để myTable = tài liệu. getElementById('bảng mục tiêu'); . .
hãy để myTable = tài liệu. getElementById('bảng mục tiêu');
