DOM应用 1、制作一个具有分页功能的表格组件。 2、要求不使用框架。
时间: 2024-05-11 07:19:48 浏览: 16
制作一个具有分页功能的表格组件可以分为以下几个步骤:
1. 创建 HTML 结构
在 HTML 中创建一个表格和两个按钮,一个用于上一页,一个用于下一页。同时,还需要一个显示当前页数的文本框。
```html
<table>
<thead>
<tr>
<th>表头1</th>
<th>表头2</th>
<th>表头3</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
<div>
<button id="prev">上一页</button>
<span id="current-page"></span>
<button id="next">下一页</button>
</div>
```
2. 编写 JavaScript 代码
首先,需要定义一个数组存储表格数据。然后,定义一个 `pageSize` 变量表示每页显示的数据条数,以及一个 `currentPage` 变量表示当前页数。接着,编写一个 `renderTable` 函数,用于根据当前页数和每页显示的数据条数来渲染表格。最后,给上一页和下一页按钮添加点击事件,用于翻页。
```javascript
const data = [
{ col1: '数据1-1', col2: '数据1-2', col3: '数据1-3' },
{ col1: '数据2-1', col2: '数据2-2', col3: '数据2-3' },
{ col1: '数据3-1', col2: '数据3-2', col3: '数据3-3' },
{ col1: '数据4-1', col2: '数据4-2', col3: '数据4-3' },
{ col1: '数据5-1', col2: '数据5-2', col3: '数据5-3' },
{ col1: '数据6-1', col2: '数据6-2', col3: '数据6-3' },
{ col1: '数据7-1', col2: '数据7-2', col3: '数据7-3' },
{ col1: '数据8-1', col2: '数据8-2', col3: '数据8-3' },
{ col1: '数据9-1', col2: '数据9-2', col3: '数据9-3' },
{ col1: '数据10-1', col2: '数据10-2', col3: '数据10-3' },
{ col1: '数据11-1', col2: '数据11-2', col3: '数据11-3' },
{ col1: '数据12-1', col2: '数据12-2', col3: '数据12-3' },
{ col1: '数据13-1', col2: '数据13-2', col3: '数据13-3' },
{ col1: '数据14-1', col2: '数据14-2', col3: '数据14-3' },
{ col1: '数据15-1', col2: '数据15-2', col3: '数据15-3' }
];
const pageSize = 5;
let currentPage = 1;
function renderTable() {
const tbody = document.getElementById('tbody');
tbody.innerHTML = '';
const start = (currentPage - 1) * pageSize;
const end = start + pageSize;
const currentData = data.slice(start, end);
currentData.forEach(item => {
const tr = document.createElement('tr');
tr.innerHTML = `
<td>${item.col1}</td>
<td>${item.col2}</td>
<td>${item.col3}</td>
`;
tbody.appendChild(tr);
});
const currentPageElem = document.getElementById('current-page');
currentPageElem.innerText = `第 ${currentPage} 页`;
}
renderTable();
document.getElementById('prev').addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
renderTable();
}
});
document.getElementById('next').addEventListener('click', () => {
const totalPages = Math.ceil(data.length / pageSize);
if (currentPage < totalPages) {
currentPage++;
renderTable();
}
});
```
3. CSS 样式
为了美化表格样式,可以自由地添加 CSS 样式。
```css
table {
border-collapse: collapse;
width: 100%;
margin-bottom: 20px;
}
table th,
table td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
table th {
background-color: #f2f2f2;
}
button {
background-color: #007bff;
color: #fff;
border: none;
padding: 8px 16px;
cursor: pointer;
border-radius: 4px;
margin-right: 10px;
}
button:hover {
background-color: #0069d9;
}
```
这样,就完成了一个具有分页功能的表格组件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)