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

Задание 1

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

Задание 2

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

Задание 3

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

Задание 4

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

Задание 5

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

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

Задание 6

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

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

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

Задание 7

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

Задание 8

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

Задание 9

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

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

Задание 10

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

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

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

Задание 11

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

Задание 12

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

Задание 13

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