<!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>
<!-- 引入 TypeScript 编译后的 JavaScript 文件 -->
<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);
});
}
本文含有隐藏内容，请 开通VIP 后查看