วิธีการแสดงตารางใน HTML โดยใช้ Ajax

Ajax ทำงานกับตาราง HTML และข้อมูล XML เพื่อแสดงรายการของเรกคอร์ดสำหรับผู้อ่านเว็บของคุณ แทนที่จะกำหนดองค์ประกอบ HTML แต่ละรายการ Ajax ให้คุณเรียกใช้ฟังก์ชันตารางเพื่อแสดงระเบียนในแถวและคอลัมน์โดยไม่ต้องเขียนโค้ดสำหรับองค์ประกอบตาราง Ajax วนซ้ำแต่ละรายการข้อมูลจาก XML และคุณเลือกว่าจะแสดงหรือซ่อนข้อมูล

1

คลิกขวาที่ไฟล์ HTML หรือ Ajax ที่คุณต้องการใช้เพื่อแสดงตาราง เปิดไฟล์ XML ที่คุณต้องการใช้เพื่อดึงข้อมูลสำหรับตาราง คำสั่ง Ajax ต่อไปนี้เปิดไฟล์ XML พร้อมรายชื่อลูกค้า:

ใหม่ Ajax.Request ('customers.xml', {method: 'get', onSuccess: ฟังก์ชั่น (การขนส่ง))

2

รับรายการแท็กและข้อมูลของแท็ก โค้ด Ajax ต่อไปนี้จะโหลดข้อมูลที่คุณใช้ในการวนซ้ำและสร้างตาราง:

var customers = transport.responseXML.getElementsByTagName ('ลูกค้า');

3

สร้างลูป "สำหรับ" ที่วนซ้ำผ่านองค์ประกอบ XML แต่ละรายการ รหัสต่อไปนี้แสดงวิธีตั้งค่าลูป "for" ใน Ajax:

สำหรับ (var i = 0; i <customers.length; i ++) {}

4

สร้างแถวของตารางและเซลล์เพื่อแสดงข้อมูลของคุณ รหัสต่อไปนี้สร้างตัวแปรแถวและเซลล์ที่ตั้งค่าโครงสร้างตาราง:

var row = $ ('customers'). insertRow (-1); var cell = row.insertCell (-1);

5

เพิ่มข้อมูลลงในเซลล์ของตาราง รหัสต่อไปนี้เพิ่มชื่อลูกค้าลงในเซลล์:

cell.innerHTML = ลูกค้า;