แบบฝึกหัดการเปลี่ยนองค์ประกอบใน JavaScript

กำหนดให้มีอาร์เรย์ แสดงองค์ประกอบของมันในรูปแบบ รายการ ul

ปรับเปลี่ยนปัญหาก่อนหน้าเพื่อให้ เมื่อคลิกที่ li ใด ๆ จะปรากฏอินพุตภายในนั้น ซึ่งสามารถใช้สำหรับ แก้ไขได้

ปรับเปลี่ยนปัญหาก่อนหน้าเพื่อให้ ใต้รายการมีอินพุต ซึ่งสามารถใช้ เพิ่มองค์ประกอบใหม่ที่ท้าย รายการ ul ได้ และทำให้ li ใหม่สามารถแก้ไขได้เช่นกัน

ปรับเปลี่ยนปัญหาก่อนหน้าเพื่อให้ ท้ายแต่ละ li มีลิงก์ 'ลบ' ซึ่งสามารถใช้ลบ li นั้นออกจาก ul ได้

ปรับเปลี่ยนปัญหาก่อนหน้าเพื่อให้ ท้ายแต่ละ li มีลิงก์ 'ขีดฆ่า' ซึ่งสามารถใช้ ขีดฆ่าข้อความของแท็ก li นั้นได้

อาร์เรย์ของออบเจ็กต์และตาราง

กำหนดอาร์เรย์ของพนักงานดังต่อไปนี้:

let employees = [
	{name: 'employee1', age: 30, salary: 400},
	{name: 'employee2', age: 31, salary: 500},
	{name: 'employee3', age: 32, salary: 600},
];

แสดงพนักงานเหล่านี้ในตาราง HTML

เพิ่มความสามารถในการแก้ไข ให้กับเซลล์ของตารางที่สร้างขึ้น

เพิ่มคอลัมน์ใหม่ในตารางของคุณโดยมี ลิงก์สำหรับลบแถวออกจากตาราง

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

อาร์เรย์ของออบเจ็กต์และรายการ

กำหนดอาร์เรย์ของพนักงานดังต่อไปนี้:

let employees = [
	{name: 'employee1', age: 30, salary: 400},
	{name: 'employee2', age: 31, salary: 500},
	{name: 'employee3', age: 32, salary: 600},
];

แสดงพนักงานแต่ละคนบนหน้าจอใน แท็ก li ของตัวเองภายในแท็ก ul

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

เพิ่มลิงก์สำหรับลบ li นี้ออกจากรายการที่ท้ายแต่ละแท็ก li

สร้างแบบฟอร์มสำหรับเพิ่ม พนักงานใหม่ใต้รายการ