使用javascript写一个包含姓名和成绩的List增删的代码 
时间: 2023-06-07 17:07:46 浏览: 18
好的,以下是使用JavaScript编写一个包含姓名和成绩的List增删代码:
HTML代码:
```html
<body>
<input type="text" id="name" placeholder="姓名">
<input type="number" id="score" placeholder="成绩">
<button onclick="addData()">添加</button>
<ul id="list"></ul>
</body>
```
JavaScript代码:
```javascript
var data = [];
function addData() {
var name = document.getElementById("name").value;
var score = document.getElementById("score").value;
if (name && score) {
var item = { name: name, score: score };
data.push(item);
showData();
document.getElementById("name").value = "";
document.getElementById("score").value = "";
} else {
alert("请输入姓名和成绩!");
}
}
function showData() {
var list = document.getElementById("list");
list.innerHTML = "";
for (var i = 0; i < data.length; i++) {
var item = data[i];
var li = document.createElement("li");
li.innerHTML = item.name + ":" + item.score + "分 ";
li.innerHTML += '<a href="#" onclick="deleteData(' + i + ')">删除</a>';
list.appendChild(li);
}
}
function deleteData(index) {
data.splice(index, 1);
showData();
}
```
解释一下代码:
- 首先定义一个空数组变量 `data`,用来存储输入的姓名和成绩;
- 在 `addData` 函数中,获取用户输入的姓名和成绩,如果都不为空,则将姓名和成绩保存到一个对象 `item` 中,并将 `item` 添加到 `data` 数组中;
- 然后调用 `showData` 函数更新列表视图,并清空输入框的值;
- 如果输入的姓名和成绩有一个为空,则弹出警告窗口提示用户;
- 在 `showData` 函数中,获取列表容器 `list` 并清空其内容;
- 遍历 `data` 数组,创建一个 `li` 元素并将姓名和成绩显示在其中,还添加了一个删除连接;
- 在 `deleteData` 函数中,使用 `splice` 函数删除指定索引位置的元素,并调用 `showData` 函数更新列表视图。
相关推荐









以下是使用 JavaScript 下载文件的代码示例:
function downloadFile(fileName, content) {
var aLink = document.createElement("a");
var blob = new Blob([content]);
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
aLink.click();
}
在上面的代码中,downloadFile 函数接收两个参数:文件名(fileName)和文件内容(content)。代码通过创建一个 元素并使用 Blob 对象封装文件内容,实现了下载文件的功能。








