写一段代码,html中表格的数据,可以自行设置范围进行查看
时间: 2024-04-09 14:33:38 浏览: 6
你可以使用以下代码来创建一个包含表格数据的 HTML 文件,并在表格中添加一个输入框,允许用户选择要显示的数据范围。
```html
<!DOCTYPE html>
<html>
<head>
<title>表格数据查看器</title>
<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
}
input {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>表格数据查看器</h1>
<input type="number" id="startRow" placeholder="起始行号">
<input type="number" id="endRow" placeholder="结束行号">
<button onclick="showData()">显示数据</button>
<table id="dataTable">
<tr>
<th>列1</th>
<th>列2</th>
<th>列3</th>
</tr>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<tr>
<td>数据4</td>
<td>数据5</td>
<td>数据6</td>
</tr>
<tr>
<td>数据7</td>
<td>数据8</td>
<td>数据9</td>
</tr>
</table>
<script>
function showData() {
var startRow = parseInt(document.getElementById("startRow").value);
var endRow = parseInt(document.getElementById("endRow").value);
var table = document.getElementById("dataTable");
var rows = table.getElementsByTagName("tr");
for (var i = 1; i < rows.length; i++) {
if (i >= startRow && i <= endRow) {
rows[i].style.display = "table-row";
} else {
rows[i].style.display = "none";
}
}
}
</script>
</body>
</html>
```
这段代码创建了一个简单的表格,其中包含三列数据。用户可以在输入框中输入起始行号和结束行号,然后点击按钮来显示指定范围的数据。注意,在这个示例中,我们假设表格的第一行是表头行。你可以将表格的数据替换为你自己的数据。