การเปลี่ยนแปลงเซลล์ตาราง HTML ด้วย JavaScript

สมมติว่ามีตาราง HTML #table บางตาราง สมมติว่ามีงานที่ต้องทำบางอย่างกับทุกเซลล์ของตาราง เช่น เขียนข้อความ '!' ลงในแต่ละเซลล์

มาดูรายละเอียดของการแก้ปัญหาประเภทนี้กัน

อย่างที่คุณทราบ ตาราง HTML มีโครงสร้างสองมิติ: มีแถว และในแถวนั้นมีเซลล์ สามารถแก้ปัญหาของเราได้ดังนี้: วนลูปผ่านแถว และในแต่ละแถวให้วนลูปผ่านเซลล์และดำเนินการที่เราต้องการกับเซลล์เหล่านั้น นั่นคือโครงร่างการแก้ปัญหาที่ให้มานั้นคล้ายกับวิธีที่เราสร้างตารางดังกล่าว โดยการเติมแถวและเซลล์

อย่างไรก็ตาม ในกรณีนี้ ลูปซ้อนสองชั้นจะเป็นการเกินความจำเป็น: เราสามารถรับ td ทั้งหมดและวนลูปผ่านพวกมัน โดยดำเนินการที่ต้องการได้ ลองทำดู:

let tds = document.querySelectorAll('#table td');

for (let td of tds) {
	td.textContent = '!';
}

สมมติว่ามีตาราง HTML บางตารางที่มีตัวเลขและปุ่ม เมื่อกดปุ่ม ให้เพิ่มจำนวนในแต่ละเซลล์ของตารางเป็นสองเท่า