请用Javascript写一个表单表格,可以点击新增按钮验证数据,可以收集所有新增数据显示在表哥中
时间: 2024-09-28 15:15:50 浏览: 41
在 JavaScript 中,我们可以使用 HTML 结构构建一个动态表格,并结合前端验证库如 jQuery 或原生 JavaScript 来处理表单验证和数据展示。下面是一个简单的示例,假设我们将使用纯 JavaScript:
HTML:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Table</title>
<style>
table, th, td {
border: 1px solid black;
padding: 8px;
}
</style>
</head>
<body>
<h2>Add New Item</h2>
<form id="newItemForm">
<label for="itemTitle">Title:</label><br>
<input type="text" id="itemTitle" required><br>
<label for="itemDesc">Description:</label><br>
<textarea id="itemDesc" rows="4" cols="50" required></textarea><br>
<button type="button" onclick="addRow()">Add</button>
</form>
<table id="dataTable">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
<script src="script.js"></script>
</body>
</html>
```
JavaScript (script.js):
```javascript
function addRow() {
const titleInput = document.getElementById('itemTitle');
const descInput = document.getElementById('itemDesc');
if (!titleInput.value || !descInput.value) {
alert('Both fields are required!');
return;
}
const newRow = document.createElement('tr');
newRow.innerHTML = `
<td>${titleInput.value}</td>
<td>${descInput.value}</td>
`;
document.getElementById('tableBody').appendChild(newRow);
// 清空输入框以准备添加新的行
titleInput.value = '';
descInput.value = '';
}
window.onload = function () {
// 初始化空白表头
const dataTable = document.getElementById('dataTable');
const tableBody = dataTable.querySelector('#tableBody');
tableBody.innerHTML = '<tr><td></td><td></td></tr>';
};
```
在这个例子中,用户填写标题和描述后点击“Add”按钮,如果输入了内容,将在表格中添加一行。如果没有填写,则弹出警告。每次添加新行后,输入框会被清空,以便继续添加。
阅读全文