自己编写了一个网页怎么在上面动态显示自己输入的表格数据
时间: 2024-02-23 15:03:26 浏览: 24
要在网页上动态显示输入的表格数据,可以使用JavaScript来实现。具体步骤如下:
1. 在HTML文件中创建一个表格,可以使用 `<table>` 和 `<tr>`、`<td>` 来创建。
2. 在JavaScript中获取表格元素,可以使用 `document.getElementById()` 方法来获取。
3. 在JavaScript中获取用户输入的数据,可以使用 `document.getElementById().value` 来获取。
4. 将用户输入的数据添加到表格中,可以使用 `insertRow()` 和 `insertCell()` 方法来添加行和列,然后使用 `innerHTML` 属性来设置单元格的内容。
5. 当用户输入数据后,需要使用事件监听器来触发JavaScript代码,可以使用 `addEventListener()` 方法来添加事件监听器。
下面是一个简单的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>动态显示表格数据</title>
</head>
<body>
<table id="myTable">
<tr>
<th>名称</th>
<th>价格</th>
</tr>
</table>
<form>
<input type="text" id="productName" placeholder="产品名称">
<input type="number" id="productPrice" placeholder="产品价格">
<button type="button" onclick="addProduct()">添加产品</button>
</form>
<script>
function addProduct() {
var name = document.getElementById("productName").value;
var price = document.getElementById("productPrice").value;
var table = document.getElementById("myTable");
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = name;
cell2.innerHTML = price;
}
document.getElementById("productName").addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("productPrice").focus();
}
});
</script>
</body>
</html>
```
这个例子中,我们创建了一个包含两列的表格,然后在用户输入产品名称和价格后,点击“添加产品”按钮可以将数据添加到表格中。同时,我们添加了一个事件监听器,当用户输入完产品名称后按下回车键,光标会自动跳转到价格输入框。