如何用css和js实现一个能够根据天数通过计算公式自动生成一张表
时间: 2024-05-16 20:12:58 浏览: 8
可以通过以下步骤实现:
1. 在 HTML 中创建一个表格元素,指定表格的 ID 和类名。
```
<table id="days-table" class="days-table">
<thead>
<tr>
<th>天数</th>
<th>计算公式</th>
<th>结果</th>
</tr>
</thead>
<tbody>
<!-- 表格的内容将在 JavaScript 中生成 -->
</tbody>
</table>
```
2. 在 CSS 中设置表格的样式,如字体、边框等。
```
.days-table {
border-collapse: collapse;
font-family: Arial, sans-serif;
font-size: 14px;
}
.days-table th,
.days-table td {
border: 1px solid #ccc;
padding: 8px;
}
```
3. 在 JavaScript 中编写生成表格的代码。首先,获取表格元素和天数的输入框元素。
```
const table = document.getElementById('days-table');
const input = document.getElementById('days-input');
```
4. 监听天数输入框的变化事件,每次输入框的值发生变化时重新生成表格。
```
input.addEventListener('input', generateTable);
```
5. 在 `generateTable` 函数中,首先清空表格的内容,然后根据天数计算每一行的计算公式和结果,生成新的表格行并添加到表格中。
```
function generateTable() {
// 清空表格内容
table.querySelector('tbody').innerHTML = '';
const days = parseInt(input.value);
for (let i = 1; i <= days; i++) {
const formula = `${i} * 2 - 1`; // 以天数为基础的计算公式
const result = eval(formula); // 计算结果
const row = document.createElement('tr');
row.innerHTML = `
<td>${i}</td>
<td>${formula}</td>
<td>${result}</td>
`;
table.querySelector('tbody').appendChild(row);
}
}
```
完整的 HTML、CSS 和 JavaScript 代码如下:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>根据天数生成表格</title>
<style>
.days-table {
border-collapse: collapse;
font-family: Arial, sans-serif;
font-size: 14px;
}
.days-table th,
.days-table td {
border: 1px solid #ccc;
padding: 8px;
}
</style>
</head>
<body>
<label for="days-input">天数:</label>
<input type="number" id="days-input" value="10">
<table id="days-table" class="days-table">
<thead>
<tr>
<th>天数</th>
<th>计算公式</th>
<th>结果</th>
</tr>
</thead>
<tbody>
<!-- 表格的内容将在 JavaScript 中生成 -->
</tbody>
</table>
<script>
const table = document.getElementById('days-table');
const input = document.getElementById('days-input');
input.addEventListener('input', generateTable);
function generateTable() {
// 清空表格内容
table.querySelector('tbody').innerHTML = '';
const days = parseInt(input.value);
for (let i = 1; i <= days; i++) {
const formula = `${i} * 2 - 1`; // 以天数为基础的计算公式
const result = eval(formula); // 计算结果
const row = document.createElement('tr');
row.innerHTML = `
<td>${i}</td>
<td>${formula}</td>
<td>${result}</td>
`;
table.querySelector('tbody').appendChild(row);
}
}
</script>
</body>
</html>
```
这样就可以根据天数自动生成一张表了。你可以根据实际需求修改计算公式和表格样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)