Nhận tr từ td JavaScript
jQuery Nhận giá trị TD của ô trong bảng. Bài viết này giải thích cách lấy giá trị ô của bảng khi nhấp vào sự kiện trong jquery. Các giá trị ô trong bảng của chúng tôi có thể chứa các giá trị văn bản đơn giản hoặc một số phần tử HTML. i. e (div, nhịp, hộp văn bản). Vì vậy, hôm nay sẽ học cách đọc các giá trị ô trong bảng này (giá trị TD) bằng cách sử dụng jquery khi chọn hàng. i. e cách nhận hoặc truy cập nội dung div bên trong TD bằng cách sử dụng jquery. Ngoài ra, sẽ xem cách lưu trữ dữ liệu bảng HTML hoàn chỉnh vào một mảng JSON Show
Đến cuối hướng dẫn này, chúng ta đã học cách lấy giá trị từ hàng của bảng, giá trị này có thể được sử dụng thêm để gửi dữ liệu bằng jquery ajax hoặc có thể sử dụng giá trị này để thực hiện một số phép tính dựa trên giá trị ô TD trong jquery. Có nhiều cách để lấy giá trị của TD bằng cách sử dụng jquery và chúng tôi sẽ giải thích bốn cách đơn giản để lấy giá trị ô của bảng theo hàng và cột Để hiểu rõ hơn, tôi chia bài đăng này thành 4 phần
Hãy chuyển sang phần mã hóa và đi qua từng phần một THÍ DỤ. Băng hình #1. Nhận các giá trị TD của ô bảng khi nhấp bằng cách sử dụng jqueryKhi chúng tôi đã tải xuống và nhập tệp Jquery js vào trang web của mình, bây giờ chúng tôi đã sẵn sàng sử dụng chức năng jqueryĐánh dấu HTML. Thêm vào Bảng HTML với dữ liệu giảTiếp theo, chúng ta phải thêm đánh dấu HTML. i. e Bảng HTML có dữ liệu chúng tôi muốn đọc. Bạn có thể tạo một bảng HTML động trong jquery với dữ liệu JSON hoặc chỉ cần thêm đánh dấu được mã hóa cứngỞ đây tôi đã mã hóa cứng thêm bảng HTML với cột là Id, ProductName, Description, Action và thêm một số dữ liệu giả vào đó. Vì vậy, đây là cách đánh dấu HTML của chúng tôi trông giống như được viết bên dưới
jQuery. mã để nhận giá trị văn bản TD khi nhấp vào nútBây giờ chúng tôi liên kết một sự kiện nhấp chuột jquery trên nút chọn của chúng tôi (nút màu đỏ) mà chúng tôi đã thêm vào mỗi hàng của bảng. Hiện đang sử dụng jQuery. text() chúng ta nhận được giá trị TD (giá trị ô của bảng). Vì vậy, mã của chúng tôi để lấy giá trị văn bản bảng td trông giống như được viết bên dưới
Vì vậy, bằng cách sử dụng mã jquery ở trên, chúng tôi có thể đọc giá trị ô của bảng HTML khi nhấp vào nút Với jQuery. text() chúng ta nhận được văn bản của td i. e. nó chỉ trả về giá trị văn bản và bỏ qua HTML và chỉ hiển thị dữ liệu văn bản. Xem bản trình diễn #2. Cách đọc giá trị ô của bảng chứa phần tử HTML tức là (div,span, textbox) bằng cách sử dụng jqueryĐánh dấu HTML. Thêm Bảng HTML và dữ liệu với một số phần tử HTMLỞ đây chúng ta sẽ tìm hiểu cách lấy giá trị ô của bảng HTML chứa nội dung HTML bên trong nó Trong một kịch bản phát triển thực tế, có một yêu cầu tiêu chuẩn, tôi. e. , để lấy nội dung HTML từ một ô của bảng. Và nối nó sau vào một phần tử HTML khác Ở đây chúng tôi đã thêm dữ liệu HTML vào bảng của mình. Đây là cách đánh dấu HTML của chúng tôi trông giống như được viết bên dưới
jQuery. Mã để lấy phần tử HTML bên trong (TD ) giá trị ô của bảng khi nhấp vào nútĐầu tiên, chúng tôi liên kết sự kiện nhấp vào nút chọn của mình và sử dụng jquery. html() chúng tôi nhận được nội dung HTML. Trước đây chúng tôi sử dụng. phương thức text() trả về dữ liệu văn bản của giá trị td của ô trong bảng Vì vậy, để trả về dữ liệu HTML, ở đây chúng tôi sử dụng. html() phương thức tìm nạp tất cả dữ liệu HTML bên trong ô bảng của chúng tôi. Bây giờ mã của chúng tôi trông giống như được viết dưới đây Xem bản giới thiệu#3. Làm cách nào để lấy nội dung HTML hoặc div dành riêng cho ô của bảng bằng cách sử dụng jqueryĐánh dấu HTML. Thêm Bảng HTML và dữ liệu với một số phần tử HTMLỞ đây trong phần này, chúng ta sẽ xem cách lấy một giá trị phần tử div hoặc span cụ thể bên trong TD (ô của bảng). Phần trước đã chỉ ra cách lấy nội dung HTML từ một ô của bảng Bây giờ chúng ta xem cách tìm nạp một phần tử HTML cụ thể từ một ô của bảng (TD) bằng jQuery. tôi. e. , cách tìm phần tử trong hàng của bảng hoặc tìm phần tử lớp cụ thể bên trong TD bằng jQuery
jQuery. Mã để lấy giá trị ô bảng của nội dung phần tử HTML (div hoặc span) cụ thể bằng cách sử dụng jqueryVì chúng tôi cần truy cập nội dung div/span cụ thể bên trong bảng TD, chúng tôi sẽ sử dụng jquery. phương thức tìm(). Sử dụng jQuery. phương thức find() và chuyển tên lớp của một phần tử HTML cụ thể, chúng tôi có thể lấy giá trị ô bảng của nội dung div / span cụ thể Ở đây chúng tôi chỉ muốn lấy giá trị giá từ ô bảng cuối cùng. Vì vậy, bây giờ mã của chúng tôi trông giống như được viết bên dưới để truy cập các phần tử cụ thể bên trong một ô của bảng Xem bản giới thiệu#4. Cách lấy tất cả các giá trị ô của hàng trong bảng bằng jqueryỞ đây bây giờ chúng tôi đọc tất cả dữ liệu của một bảng HTML nhất định. Trong một kịch bản thực tế, nhiều lần chúng ta cần gửi dữ liệu bảng hoàn chỉnh đến máy chủ. i. e tìm nạp giá trị bảng và lưu trữ nó trong mảng JSON, mảng này sau đó sẽ chuyển nó sang phía máy chủ Hãy làm cho phần này thật đơn giản bằng cách chỉ đọc dữ liệu bảng HTML bằng cách sử dụng jquery và lưu trữ nó trong một đối tượng JSON Đầu tiên, chúng tôi tạo một bảng HTML với dữ liệu giả và một nút thực hiện công việc kỳ diệu. i. e chuyển đổi dữ liệu bảng HTML sang đối tượng JSON Vì vậy, đây là cách đánh dấu bảng HTML của chúng tôi trông giống như được viết bên dưới
jQuery. Mã để tìm nạp các giá trị dữ liệu bảng HTML và lưu vào đối tượng JSONỞ đây chúng tôi tạo một biến mảng arrData nơi chúng tôi lưu trữ dữ liệu bảng HTML của mình. Ở đây chúng tôi sử dụng jQuery. each() để lấy tất cả dữ liệu hàng của bảng Với mã jquery được viết bên dưới, chúng tôi có thể lưu dữ liệu bảng HTML hoàn chỉnh của mình vào một đối tượng mảng javascript
Xem bản trình diễn Phần kết luận. Bài viết này trình bày hướng dẫn đầy đủ về cách đọc giá trị TD của ô trong bảng HTML trong jQuery chỉ bằng một lần nhấp vào nút. Ở đây chúng tôi đã cung cấp các tình huống khác nhau để lấy dữ liệu bảng td với ví dụ demo trực tiếp. Chúng tôi có thể hiểu cách lấy nội dung HTML từ một bảng, chúng tôi cũng học cách lấy toàn bộ dữ liệu của bảng và lưu nó vào một biến mảng Tài liệu tham khảo khác
Cảm ơn bạn đã đọc, vui lòng tiếp tục truy cập blog này và chia sẻ điều này trong mạng của bạn. Ngoài ra, tôi rất thích nghe ý kiến của bạn trong phần bình luận Làm cách nào để nhận giá trị td của hàng trong bảng trong JavaScript?jQuery. mã để nhận giá trị văn bản TD khi nhấp vào nút. text() chúng ta nhận được giá trị TD (giá trị ô của bảng). Vì vậy, mã của chúng tôi để lấy giá trị văn bản bảng td trông giống như được viết bên dưới. $(tài liệu). ready(function(){ // mã để đọc dữ liệu (giá trị) ô hàng của bảng đã chọn .
Làm cách nào để lấy dữ liệu hàng của 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 item(index) Alert the innerHTML of the first tênItem(id). Thay đổi nội dung ô đầu tiên của bảng
Làm cách nào để lấy TD ID trong JavaScript?Để lấy id từ thẻ tr và hiển thị nó trong một td mới, hãy sử dụng tài liệu. querySelectorAll(bảng tr) .
Làm cách nào để lấy dữ liệu hàng của bảng trong JavaScript onclick?Bạn có thể lấy chi tiết hàng lưới bên trong sự kiện nhấp chuột bằng cách chuyển phần tử đích đến phương thức “getRowInfo” của thành phần Lưới .
|