Cách hiển thị bảng trong HTML bằng Ajax

Ajax hoạt động với các bảng HTML và dữ liệu XML để hiển thị danh sách các bản ghi cho các trình đọc Web của bạn. Thay vì xác định từng phần tử HTML, Ajax cho phép bạn gọi các hàm bảng để hiển thị các bản ghi theo hàng và cột mà không cần viết mã cho các phần tử bảng. Các vòng lặp Ajax thông qua từng mục dữ liệu từ XML và bạn chọn hiển thị hoặc ẩn dữ liệu.

1.

Bấm chuột phải vào tệp HTML hoặc Ajax mà bạn muốn sử dụng để hiển thị bảng. Mở tệp XML bạn muốn sử dụng để lấy dữ liệu cho bảng. Câu lệnh Ajax sau đây mở tệp XML có danh sách khách hàng:

new Ajax.Request ('customer.xml', {phương thức: 'get', onSuccess: function (Transport)}

2.

Nhận danh sách các thẻ và dữ liệu của thẻ. Mã Ajax sau đây tải dữ liệu bạn sử dụng để lặp qua và tạo bảng:

var khách hàng = Transport.responseXML.getElementsByTagName ('khách hàng');

3.

Tạo vòng lặp "for" lặp lại qua từng phần tử XML. Đoạn mã sau cho biết cách thiết lập vòng lặp "for" trong Ajax:

for (var i = 0; i <khách hàng.length; i ++) {}

4.

Tạo một hàng bảng và ô để hiển thị dữ liệu của bạn. Đoạn mã sau tạo các biến hàng và ô thiết lập cấu trúc bảng:

var row = $ ('khách hàng'). insertRow (-1); var cell = row.insertCell (-1);

5.

Thêm dữ liệu vào ô của bảng. Đoạn mã sau thêm tên khách hàng vào ô:

cell.innerHTML = khách hàng;

Bài ViếT Phổ BiếN