使用javascript写一个成绩单List增删的代码
时间: 2023-06-07 17:08:00 浏览: 98
使用java对学生表进行增删改查
以下是使用 JavaScript 实现成绩单列表增删的代码:
```
<html>
<head>
<title>成绩单列表增删</title>
<script>
var list = []; // 定义空数组用于存储成绩单项
// 添加成绩单项的函数
function addScore() {
var score = prompt("请输入成绩单项:"); // 弹出输入框,让用户输入成绩单项
list.push(score); // 在数组末尾添加成绩单项
displayList(); // 调用 displayList() 函数显示更新后的成绩单列表
}
// 删除成绩单项的函数
function deleteScore() {
var index = prompt("请输入要删除的成绩单项的索引:"); // 弹出输入框,让用户输入要删除的成绩单项的索引
list.splice(index, 1); // 从数组中删除指定索引的成绩单项
displayList(); // 调用 displayList() 函数显示更新后的成绩单列表
}
// 显示成绩单列表的函数
function displayList() {
var ul = document.getElementById("scoreList"); // 获取 id 为 scoreList 的 <ul> 元素
ul.innerHTML = ''; // 清空 <ul> 元素的内容
// 遍历数组,并将每个元素添加到 <ul> 元素中
for (var i = 0; i < list.length; i++) {
var li = document.createElement("li"); // 创建 <li> 元素
li.appendChild(document.createTextNode(list[i])); // 将当前数组元素添加到 <li> 元素中
ul.appendChild(li); // 将 <li> 元素添加到 <ul> 元素中
}
}
</script>
</head>
<body>
<h1>成绩单列表增删</h1>
<button onclick="addScore()">添加成绩单项</button>
<button onclick="deleteScore()">删除成绩单项</button>
<ul id="scoreList"></ul>
</body>
</html>
```
当用户点击“添加成绩单项”按钮时,会弹出一个输入框,让用户输入成绩单项。将输入内容存储到数组中,并调用 `displayList()` 函数显示更新后的成绩单列表。
当用户点击“删除成绩单项”按钮时,会弹出一个输入框,让用户输入要删除的成绩单项的索引。根据用户输入的索引,从数组中删除指定的成绩单项,并调用 `displayList()` 函数显示更新后的成绩单列表。
更新后的成绩单列表会显示在页面上,使用 `<ul>` 和 `<li>` 标签来展示。
阅读全文