JavaScript 요소 변경 실습

배열이 주어집니다. ul 목록 형태로 그 요소들을 출력하세요.

이전 문제를 수정하여, 어떤 li를 클릭해도 그 안에 입력(input) 필드가 나타나, 해당 항목을 편집할 수 있도록 하세요.

이전 문제를 수정하여, 목록 아래에 입력 필드를 추가하고, 이를 사용하여 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를 목록에서 삭제할 수 있는 링크를 추가하세요.

목록 아래에 새 직원을 추가할 수 있는 폼을 만드세요.