使用模板字符串实现 接收用户输入的姓名和密码,把姓名和密码放入表格的td中,把表格输出到页面中
时间: 2024-03-27 07:36:04 浏览: 15
好的,下面是使用模板字符串实现的代码示例:
HTML 代码:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格输出</title>
</head>
<body>
<table id="myTable">
<tr>
<th>姓名</th>
<th>密码</th>
</tr>
</table>
<br>
<label for="name">姓名:</label>
<input type="text" id="name">
<br>
<label for="password">密码:</label>
<input type="password" id="password">
<br>
<button onclick="addRow()">添加</button>
</body>
</html>
```
JavaScript 代码:
```javascript
function addRow() {
// 获取姓名和密码输入框的值
var name = document.getElementById("name").value;
var password = document.getElementById("password").value;
// 创建表格行和单元格
var table = document.getElementById("myTable");
var row = table.insertRow(-1);
var nameCell = row.insertCell(0);
var passwordCell = row.insertCell(1);
// 使用模板字符串设置单元格内容
nameCell.innerHTML = `<td>${name}</td>`;
passwordCell.innerHTML = `<td>${password}</td>`;
}
```
在上述代码中,我们使用了模板字符串的语法来将用户输入的姓名和密码放入表格的单元格中,然后将表格输出到页面中。在按钮的点击事件中调用 `addRow()` 函数,该函数会获取输入框的值,创建表格行和单元格,并使用模板字符串将输入的姓名和密码放入单元格中。最后,将表格添加到页面中。
希望对您有所帮助!
相关推荐
![](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)