<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click Button to Open Modal</title>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close-button {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close-button:hover,
.close-button:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<button type="button" onclick="openModal()">打开弹窗</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close-button" onclick="closeModal()">×</span>
<form id="userForm">
<label for="name">ID:</label>
<input type="text" type="number" id="id" name="id" required><br><br>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" required><br><br>
<label for="birthdate">出生日期:</label>
<input type="date" id="birthdate" name="birthdate" required><br><br>
<label>性别:</label>
<select id="gender" name="gender" required>
<option value="">未指定</option>
<option value="female">女性</option>
<option value="male">男性</option>
</select><br><br>
<label for="specialNote">特别说明:</label><br>
<textarea id="specialNote" name="specialNote"></textarea><br><br>
<input type="submit" value="提交">
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
declare interface Array<T> {
find(predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any): T | undefined;
}
declare interface Array<T> {
findIndex(predicate: (value: T, index: number, obj: T[]) => unknown, thisArg?: any): number;
}
interface Artist {
id: number;
name: string;
birthDate: string;
gender: string;
artworkType: string;
contactInfo: string;
exhibitionDate: string;
specialNote: string;
}
let artists: Artist[] = [];
let nextId = 1;
const artistForm = document.getElementById('artistForm') as HTMLFormElement;
const artistTable = document.getElementById('artistTable') as HTMLTableElement;
const artistList = document.getElementById('artistList') as HTMLTableSectionElement;
const searchInput = document.getElementById('searchInput') as HTMLInputElement;
const searchResult = document.getElementById('searchResult');
artistForm.addEventListener('submit', function(event) {
event.preventDefault();
const artist: Artist = {
id: nextId++,
name: (document.getElementById('artistName') as HTMLInputElement).value,
birthDate: (document.getElementById('artistBirthDate') as HTMLInputElement).value,
gender: (document.getElementById('artistGender') as HTMLSelectElement).value,
artworkType: (document.getElementById('artworkType') as HTMLSelectElement).value,
contactInfo: (document.getElementById('contactInfo') as HTMLInputElement).value,
exhibitionDate: (document.getElementById('exhibitionDate') as HTMLInputElement).value,
specialNote: (document.getElementById('specialNote') as HTMLTextAreaElement).value
};
artists.push(artist);
addArtistToTable(artist);
artistForm.reset();
});
function addArtistToTable(artist: Artist) {
const row = artistList.insertRow();
row.innerHTML = `
<td>${artist.id}</td>
<td>${artist.name}</td>
<td>${artist.birthDate}</td>
<td>${artist.gender}</td>
<td>${artist.artworkType}</td>
<td>${artist.contactInfo}</td>
<td>${artist.exhibitionDate}</td>
<td>${artist.specialNote}</td>
<td>
<button οnclick="editArtist(${artist.id})">编辑</button>
<button οnclick="deleteArtist(${artist.id})">删除</button>
</td>
`;
}
function editArtist(id: number) {
const artist = artists.find(a => a.id === id);
if (artist) {
(document.getElementById('artistName') as HTMLInputElement).value = artist.name;
(document.getElementById('artistBirthDate') as HTMLInputElement).value = artist.birthDate;
(document.getElementById('artistGender') as HTMLSelectElement).value = artist.gender;
(document.getElementById('artworkType') as HTMLSelectElement).value = artist.artworkType;
(document.getElementById('contactInfo') as HTMLInputElement).value = artist.contactInfo;
(document.getElementById('exhibitionDate') as HTMLInputElement).value = artist.exhibitionDate;
(document.getElementById('specialNote') as HTMLTextAreaElement).value = artist.specialNote;
const submitButton = document.querySelector('#artistForm button[type="submit"]') as HTMLButtonElement;
submitButton.innerText = '更新艺术家';
submitButton.onclick = function(event) {
event.preventDefault();
updateArtist(id);
};
}
}
function updateArtist(id: number) {
const artistIndex = artists.findIndex(a => a.id === id);
if (artistIndex !== -1) {
artists[artistIndex] = {
id: id,
name: (document.getElementById('artistName') as HTMLInputElement).value,
birthDate: (document.getElementById('artistBirthDate') as HTMLInputElement).value,
gender: (document.getElementById('artistGender') as HTMLSelectElement).value,
artworkType: (document.getElementById('artworkType') as HTMLSelectElement).value,
contactInfo: (document.getElementById('contactInfo') as HTMLInputElement).value,
exhibitionDate: (document.getElementById('exhibitionDate') as HTMLInputElement).value,
specialNote: (document.getElementById('specialNote') as HTMLTextAreaElement).value
};
refreshTable();
const submitButton = document.querySelector('#artistForm button[type="submit"]') as HTMLButtonElement;
submitButton.innerText = '添加艺术家';
artistForm.reset();
}
}
function deleteArtist(id: number) {
if (confirm("确定要删除该艺术家吗?")) {
artists = artists.filter(a => a.id !== id);
refreshTable();
}
}
function refreshTable() {
artistList.innerHTML = "";
artists.forEach(artist => {
addArtistToTable(artist);
});
}