Trích xuất dữ liệu từ bảng HTML bằng JavaScript

❮ Đối tượng bảng

Thí dụ

Tìm xem có bao nhiêu ô ở hàng đầu tiên trong một bảng

var x = tài liệu. getElementById["myTable"]. hàng[0]. tế bào. chiều dài;

Kết quả của x sẽ là

Tự mình thử »

Thêm các ví dụ "Tự mình thử" bên dưới

Định nghĩa và cách sử dụng

Bộ sưu tập ô trả về một bộ sưu tập tất cả hoặc các phần tử trong một bảng

Ghi chú. Các thành phần trong bộ sưu tập được sắp xếp như chúng xuất hiện trong mã nguồn

Mẹo. Sử dụng tập hợp hàng để trả về tập hợp tất cả các phần tử trong bảng

Mẹo. Sử dụng phương thức insertRow[] để tạo một hàng mới []

Mẹo. Sử dụng phương thức deleteRow[] để xóa một hàng

Mẹo. Sử dụng phương thức insertCell[] để tạo một ô mới[]

Mẹo. Sử dụng phương thức deleteCell[] để xóa một ô

Hỗ trợ trình duyệt

Bộ sưu tập ôCó CóCóCóCó

cú pháp

Đặc tính

Thuộc tính Mô tả length Trả về số lượng và/orelements trong tập hợp

Ghi chú. Thuộc tính này là chỉ đọc

phương pháp

MethodDescription[index]Trả vềand/orelement từ bộ sưu tập với chỉ mục đã chỉ định [bắt đầu từ 0]

Ghi chú. Trả về null nếu số chỉ mục nằm ngoài phạm vi

item[index]Trả vềand/orelement từ bộ sưu tập với chỉ mục đã chỉ định [bắt đầu từ 0]

Ghi chú. Trả về null nếu số chỉ mục nằm ngoài phạm vi

nameItem[id]Trả vềvà/hoặc phần tử từ bộ sưu tập với id được chỉ định

Ghi chú. Trả về null nếu id không tồn tại

chi tiết kỹ thuật

Phiên bản DOM. Giá trị trả về đối tượng tài liệu cấp 2 cốt lõi. Đối tượng HTMLCollection, đại diện cho alland/orelements trong phần tử. Các thành phần trong bộ sưu tập được sắp xếp như chúng xuất hiện trong mã nguồn

Thêm ví dụ

Thí dụ

[mục lục]

Cảnh báo InternalHTML của ô đầu tiên trong hàng đầu tiên của bảng

cảnh báo [tài liệu. getElementById["myTable"]. hàng[0]. ô[0]. InternalHTML];

Tự mình thử »

Thí dụ

mục [chỉ mục]

Cảnh báo InternalHTML của ô đầu tiên trong hàng đầu tiên của bảng

cảnh báo [tài liệu. getElementById["myTable"]. hàng[0]. tế bào. mục[0]. InternalHTML];

Tự mình thử »

Thí dụ

tênItem[id]

Thông báo InternalHTML của ô có id="myTd" ở hàng đầu tiên của bảng

cảnh báo [tài liệu. getElementById["myTable"]. hàng[0]. tế bào. tênItem["myTd"]. InternalHTML];

Tự mình thử »

Thí dụ

Thay đổi nội dung ô đầu tiên của bảng

var x = tài liệu. getElementById["myTable"]. hàng[0]. ô;
x[0]. innerHTML = "NỘI DUNG MỚI";

Tự mình thử »

Trang liên quan

tài liệu tham khảo HTML. HTML

nhãn

tài liệu tham khảo HTML. HTML

nhãn

Tham chiếu JavaScript. Đối tượng dữ liệu bảng DOM HTML

Tham chiếu JavaScript. Đối tượng tiêu đề bảng DOM DOM HTML

❮ Đối tượng bảng

Dữ liệu có thể được tìm thấy trực tuyến ở nhiều định dạng khác nhau, nhưng phổ biến nhất là định dạng bảng, đặc biệt là nó hiển thị thông tin theo bố cục rất có cấu trúc và tổ chức tốt. Vì vậy, điều rất quan trọng là có thể trích xuất dữ liệu từ các bảng một cách dễ dàng

Và đây là một trong những tính năng quan trọng nhất của công cụ trích xuất dữ liệu của ScrapingBee, bạn có thể trích xuất dữ liệu từ các bảng mà không phải thực hiện bất kỳ xử lý hậu kỳ nào đối với phản hồi HTML. Chúng tôi có thể sử dụng tính năng này bằng cách chỉ định bộ chọn CSS của bảng trong một bộ extract_rules và để ScrapingBee làm phần còn lại

Trong ví dụ này, chúng tôi sẽ lấy 100 giá cổ phiếu hàng đầu của NASDAQ từ trang demo này

Bộ chọn CSS của bảng chứa thông tin chúng tôi cần là .BasicTable-table

Vì vậy, mã của chúng tôi sẽ trông như thế này

const scrapingbee = require['scrapingbee']; // Import ScrapingBee's SDK

async function scrape_table[url] {
  var client = new scrapingbee.ScrapingBeeClient['YOUR-API-KEY']; // New ScrapingBee client
  var response = await client.get[{
    url: url,
    params: { // Parameters:
    'extract_rules':{
        "table_json" : {
            "selector": ".table",
            "output": "table_json" // Extracting data in JSON representation
        },
        "table_array" : {
            "selector": ".table",
            "output": "table_array" // Extracting data in Array representation
        },
      }
    }
  }];
    return response;
}

scrape_table["//demo.scrapingbee.com/table_content.html"].then[function [response] {
    var decoder = new TextDecoder[];
    var text = decoder.decode[response.data];
    console.log[text];
}].catch[[e] => console.log['A problem occurs : ' + e.response.data]];

Và kết quả sẽ như thế này

{"table_json": [{"SYMBOL ": "AMD", "NAME ": "Advanced Micro Devices Inc", "PRICE ": "94.82", "CHANGE ": "-3.98", "%CHANGE ": "-4.03"},...], "table_array": [["AMD", "Advanced Micro Devices Inc", "94.82", "-3.98", "-4.03"],...]}

Bạn có thể tìm thêm chi tiết về sự khác biệt giữa và trong trang tài liệu Khai thác dữ liệu của chúng tôi

Làm cách nào để lấy dữ liệu từ bảng HTML bằng JavaScript?

Làm cách nào để trích xuất dữ liệu từ bảng HTML?

Làm cách nào để lấy giá trị ô của bảng HTML trong JavaScript?

Làm cách nào để lấy dữ liệu hàng của bảng trong JavaScript title?