Diễn đàn Thảo luận chung [CẦN HỖ TRỢ CODE] Lấy dữ liệu table HTML và xử lý hiển thị bằng JS

[CẦN HỖ TRỢ CODE] Lấy dữ liệu table HTML và xử lý hiển thị bằng JS

764 lượt xem
04/10/2024 13:05 Bình luận (11)
Chào các bác,

Em đang gặp vấn đề trong việc lấy dữ liệu từ file data.html. cụ thể:

Đây là bảng HTML trong file data.html

Đây là index.html


Vấn đề mà em gặp phải là thông tin về môn học "Học phần: Thiết kế đồ họa và quảng cáo" trong file data.html được hiển thị vào thứ 5, nhưng trong index.html lại hiển thị vào thứ 3. Em đã cố gắng nhiều lần mà vẫn không tìm ra nguyên nhân. Mong các bác giúp em với!

Cảm ơn mọi người!
Trùm Phụ đã thích bài viết này
BÌNH LUẬN (11)
12
Tag Quote
tại sao bác lại phải làm table dạng kia mà không dùng google sheet nhỉ? trong khi sheet tiện lợi hơn rất nhiều lần
Avatar
Tác giả
Tag Quote
dữ liệu e cào được là như vậy, không thay đổi được bác ơi
Tag Quote
cào được thì thay đổi dạng nó đi bác cần gì phải theo =))
Avatar
Tác giả
Tag Quote
cào đc data.html và ở index.html chuyển thành các card thay vì table như dữ liệu gốc mà bác
Tag Quote
xem lại đoạn if (cellContent && !/^\d+$/.test(cellContent)) {
Tag Quote
Chào các bạn,

Mình đọc qua thì thấy ý của bạn hơi khó hiểu, nhưng mình có một số thông tin có thể giúp ích cho bạn nè. Mình nghĩ điều này cũng trùng ý với bạn @. . . .:

Test 1: Dùng để chọn file data.html, nó sẽ tự động trích xuất nội dung trong table ra thành một file JSON cho bạn tải về.

Test 2: Dùng để chọn file data.json, nó sẽ tự hiển thị nội dung giống hệt với file index mà bạn đã cung cấp.

Test 3: Sử dụng để chỉnh sửa nội dung của file data.json của bạn.

Test 4: File này có hơi khác một chút. Kéo xuống cuối file ở view-source, bạn sẽ thấy dòng này: new Schedule('data.json'); thì data.json chính là file được dùng để load nội dung ra. Khi truy cập, nó cũng xuất ra nội dung y hệt Test 2, nhưng nội dung sẽ là file từ hệ thống và bạn phải tạo một file data.json và copy nội dung trong file trên máy để lưu lại.

Đây là link đến file data.json của mình: data.json
Avatar
Tác giả
Tag Quote
thank kiu Phương Cute nhưng mà e đang gặp vấn đề là chuyển cái bảng này thành dữ liệu

ở đây có sai sót đáng lẽ môn trong ảnh là vào thứ 5 nhưng sau khi chuyển lại thành thứ 3
Tag Quote
@Trùm Phụ @thái có vẻ ko đúng đâu bác ơi, vì code của bác kia duyệt bảng thành object rồi
@copecute về cơ bản thì đang gặp lỗi khi duyệt object, nó đang hiểu là học phần thiết kế đồ họa thuộc về thứ 3, vì phụ thuộc vào số lượng phần tử cột/hàng . bác có thể tham khảo code sau, tất nhiên nó chỉ đúng với trường hợp trên, và không đúng với mọi phần tử khi dữ liệu bảng bị biến thiên:
fetch('data.html')
    .then(response => response.text())
    .then(htmlString => {
        const parser = new DOMParser();
        const doc = parser.parseFromString(htmlString, 'text/html');

        const table = doc.querySelector('.table-bordered tbody');
        const rows = table.querySelectorAll('tr');

        const result = [];

        // Mảng chứa tên các ngày trong tuần
        const days = ['Thứ hai', 'Thứ ba', 'Thứ tư', 'Thứ năm', 'Thứ sáu', 'Thứ bảy', 'Chủ nhật'];

        rows.forEach((row, index) => {
            const cells = row.querySelectorAll('td');
            const rowData = {};

            // Lấy nội dung của phần tử đầu
            const tietDau = cells[0].innerText.trim();

            // Mặc định tất cả các ngày sẽ là null
            days.forEach(day => {
                rowData[day] = null;
            });

            // Gán giá trị cho từng ngày từ cells
            for (let i = 1; i < cells.length; i++) {
                const value = cells[i].innerText.trim(); // Lấy nội dung ô
                if (value) { // Nếu ô có giá trị
                    // Gán giá trị cho ngày tương ứng
                    rowData[days[i - 1]] = value;
                }
            }

            // Chỉ xét đối tượng thứ 8 (index 7)
            if (index === 7) {
                // Nếu có dữ liệu ở "Thứ 3", gán cho "Thứ 5" và xóa "Thứ 3"
                if (rowData['Thứ ba']) {
                    rowData['Thứ năm'] = rowData['Thứ ba']; // Gán dữ liệu từ thứ 3 cho thứ 5
                    rowData['Thứ ba'] = null; // Đặt thứ 3 thành null
                }
            }

            // Tạo object với "Tiết X" là key và rowData là value
            const rowObject = {
                ["Tiết " + tietDau]: rowData
            };

            result.push(rowObject);
        });

        console.log(result);
    })
    .catch(error => {
        console.error('Error fetching data:', error);
    });

Tag Quote
hoặc là bác hãy cố gắng tách (split) rowspan thành các phần tử riêng lẻ vì nó đang ở trạng thái margin (gộp)
<td rowspan="5">nội dung</td>

ví dụ biến nó thành 5 cái
<td id="rowspan-5">nội dung</td>

sau đó kiểm duyệt lại object
Tag Quote
nếu bác làm theo cách tách td rowspan thành 5 td#rowspan-5mỗi tr thì nó sẽ chạy đúng như mong muốn của bác với mọi phần tử biến thiên
12

Viết bình luận

Vui lòng đăng nhập để tham gia bình luận.

Trang chủ Tìm kiếm Trò chuyện Đăng nhập