document.querySelectorAll('input[type="password"]').forEach(function(f) { f.type = "text"; // 将密码输入框的类型改为文本框 });这个程序的另三种写法

这个JavaScript代码片段使用了querySelectorAll方法获取页面上所有type属性为"password"的`<input>`元素，并对它们的type属性进行了修改，将其从"password"更改为"text"。以下是另外五种实现同样功能的不同写法： 1. 使用ES6的Array.from()和map()方法： ```javascript let passwordInputs = Array.from(document.querySelectorAll('input[type="password"]')); passwordInputs.map(input => input.type = 'text'); ``` 2. 利用ES5的for...of循环： ```javascript for (let f of document.querySelectorAll('input[type="password"]')) { f.type = "text"; } ``` 3. 使用`.forEach()`配合箭头函数： ```javascript document.querySelectorAll('input[type="password"]').forEach(input => input.type = 'text'); ``` 4. 利用现代浏览器支持的HTMLCollection遍历： ```javascript let inputs = document.getElementsByTagName('input'); inputs.filter(input => input.getAttribute('type') === 'password').forEach(input => input.type = 'text'); ``` 5. 如果需要封装成一个自定义函数，可以这样写： ```javascript function changeInputType(typeToChange) { document.querySelectorAll(`input[type="${typeToChange}"]`).forEach(input => input.type = 'text'); } changeInputType('password'); ```

你的代码已经很好地完成了学生管理系统的前端界面和登录页的布局，但目前还缺少以下几个关键功能： 1. **表单提交逻辑未实现**：点击“保存”按钮后，没有将输入的数据添加到表格中。 2. **删除功能未实现**：点击“删除”按钮无法移除对应的学生记录。 3. **修改功能不完整**：虽然有 `fillForm` 函数，但它只填充了表单字段，并没有切换为“更新”状态（比如显示一个“更新”按钮）。 4. **数据持久化缺失**：页面刷新后所有数据都会丢失。 5. **登录页无跳转或验证逻辑**。 --- ### ✅ 下面我将为你补充这些功能，使系统具备基本的增删改查能力（CRUD），使用纯 HTML + JavaScript 实现。 --- ## 1. 增加学生信息并展示在表格中 我们将为“保存”按钮添加事件处理函数，收集输入框内容并动态添加到表格中。 ```html <script> let name = document.getElementById('name') let age = document.getElementById('age') let address = document.getElementById('address') // 用于存储当前正在编辑的学生索引 let editIndex = -1; function fillForm(item) { const tr = item.parentNode.parentNode; let nodes = tr.querySelectorAll('td'); name.value = nodes[0].innerText; age.value = parseInt(nodes[1].innerText); address.value = nodes[2].innerText; editIndex = parseInt(tr.children[0].innerText) - 1; // 获取学号并转换为索引 } function saveStudent() { if (!name.value || !age.value || !address.value) { alert("请填写所有字段！"); return; } const tbody = document.querySelector("tbody"); if (editIndex >= 0) { // 更新已有行 const row = tbody.rows[editIndex]; row.cells[0].innerText = name.value; row.cells[1].innerText = age.value + "岁"; row.cells[2].innerText = address.value; editIndex = -1; } else { // 添加新行 const newRow = tbody.insertRow(); newRow.innerHTML = ` <th scope="row">${tbody.rows.length + 1}</th> <td>${name.value}</td> <td>${age.value}岁</td> <td>${address.value}</td> <td> <button type="button" class="btn btn-sm btn-secondary mx-3" onclick="fillForm(this)">修改</button> <button type="button" class="btn btn-sm btn-danger" onclick="deleteStudent(this)">删除</button> </td> `; } // 清空表单 name.value = ""; age.value = ""; address.value = ""; } function deleteStudent(button) { const row = button.parentNode.parentNode; row.remove(); // 重新编号学号 const rows = document.querySelectorAll("tbody tr"); rows.forEach((tr, index) => { tr.querySelector("th").innerText = index + 1; }); } </script> ``` > 将上述 `<script>` 替换掉你原来的 `<script>` 标签中的内容即可。 --- ## 2. 给“保存”按钮绑定事件 在 `<form>` 中加入 `onsubmit="event.preventDefault(); saveStudent()"`，防止默认提交行为并调用我们定义的方法。 ```html <form method="post" action="" class="row g-3 mt-3 d-flex justify-content-around align-items-center" onsubmit="event.preventDefault(); saveStudent()"> ``` --- ## 3. 登录页添加简单验证跳转逻辑 在登录页底部添加如下脚本，模拟登录验证并跳转主页。 ```html <script> document.querySelector("form").addEventListener("submit", function(e) { e.preventDefault(); const username = document.getElementById("username").value; const password = document.getElementById("password").value; if (username === "admin" && password === "123456") { window.location.href = "index.html"; // 假设主页是 index.html } else { alert("用户名或密码错误"); } }); </script> ``` --- ## ✅ 最终效果说明 - 表单输入后点击“保存”，会新增一行学生数据。 - 点击“修改”按钮会自动回填数据，再次点击“保存”即可更新。 - 点击“删除”按钮可以删除该行数据。 - 登录页简单判断用户名密码是否为 admin/123456，正确则跳转主页。 --- ## ❗注意事项 - 当前数据没有持久化，页面刷新数据会丢失。如果需要长期保存，需结合本地存储（localStorage）或后端接口。 - 可以进一步优化 UI 和交互体验，例如添加提示框、加载动画等。 --- ##