เน้นแถวในตาราง HTML ด้วยเมื่อคลิก

เมื่อคุณสร้างเว็บเพจใน HTML คุณสามารถใช้ฟังก์ชัน JavaScript เพื่อเปลี่ยนลักษณะที่ปรากฏขององค์ประกอบหน้าเว็บในการโต้ตอบกับผู้ใช้ ในการไฮไลต์แถวบางแถวในตารางคุณสามารถตั้งค่าการประกาศ Cascading Style Sheet สำหรับแถวเหล่านี้ในสถานะปกติและในสถานะที่ถูกเน้น โดยการเพิ่มคุณสมบัติฟังเหตุการณ์ไปยังองค์ประกอบแถวหน้าของคุณสามารถเรียกใช้ฟังก์ชั่น JavaScript เพื่อดำเนินการ onclicks การเปลี่ยนแปลงแอตทริบิวต์ชื่อองค์ประกอบขององค์ประกอบแบบไดนามิกและต่อมาเปลี่ยนลักษณะที่ปรากฏของพวกเขา

1

สร้างตาราง HTML ของคุณ เพิ่มโค้ดมาร์กอัปตัวอย่างต่อไปนี้ไปยังไฟล์เว็บเพจของคุณ:

ตารางนี้มีสองแถวแต่ละคอลัมน์มีสามคอลัมน์ แต่ละเซลล์มีหมายเลขอยู่ในนั้นเพื่อสาธิต แต่คุณสามารถรวมเนื้อหาใด ๆ ที่คุณชอบในหน้าของคุณเอง

2

เพิ่มส่วนสำหรับ CSS ในส่วนหัวของหน้าของคุณ ระหว่างแท็กส่วนหัวเปิดและปิดในไฟล์ของคุณให้เพิ่มโครงร่างโค้ด CSS ต่อไปนี้:

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

3

เพิ่มส่วนสำหรับ JavaScript ในส่วนหัวของหน้า ระหว่างแท็กส่วนหัวเปิดและปิดในไฟล์ของคุณเพิ่มรหัสต่อไปนี้:

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

4

แก้ไขชื่อคลาสขององค์ประกอบแถวของตาราง เมื่อฟังก์ชั่นดำเนินการซึ่งหมายความว่าผู้ใช้คลิกองค์ประกอบแถว เพิ่มรหัสต่อไปนี้ภายในฟังก์ชั่น JavaScript ของคุณรับการอ้างอิงถึงองค์ประกอบแถวของตารางภายในหน้า: var row = document.getElementById (rowID);

เพิ่มบรรทัดต่อไปนี้เพื่อรับสำเนาสตริงของชื่อคลาสปัจจุบันขององค์ประกอบแถวของตารางของคุณ: var curr = row.className;

เพิ่มคำสั่งแบบมีเงื่อนไขที่ปรับแต่งลักษณะแถวของตารางของคุณ: if (curr.indexOf ("normal")> = 0) row.className = "highlight"; else row.className = "ปกติ";

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

5

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

ปลาย

• โดยการเพิ่มรหัส CSS ของคุณคุณสามารถกำหนดสีข้อความและคุณสมบัติอื่น ๆ ของแถวตารางของคุณในแต่ละรัฐ

การเตือน

• JavaScript และ CSS มีผลลัพธ์ที่แตกต่างกันในเบราว์เซอร์ดังนั้นการทดสอบจึงเป็นสิ่งจำเป็น