HTML 设置HTML表格的最大显示行数

HTML 表格本身并不直接支持设置最大显示行数的功能，你可以通过 JavaScript 来实现这个功能，以下是一个简单的示例：

（图片来源网络，侵删）

<!DOCTYPE html>
<html>
<head>
    <style>
        table {
            width: 100%;
            bordercollapse: collapse;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            textalign: left;
        }
    </style>
</head>
<body>
<h2>设置 HTML 表格的最大显示行数</h2>
<p>点击 "设置最大显示行数" 按钮来设置表格的最大显示行数。</p>
<button onclick="setMaxRows()">设置最大显示行数</button>
<br><br>
<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>35</td>
    <td>广州</td>
  </tr>
  <tr>
    <td>赵六</td>
    <td>40</td>
    <td>深圳</td>
  </tr>
  <tr>
    <td>孙七</td>
    <td>45</td>
    <td>杭州</td>
  </tr>
</table>
<script>
function setMaxRows() {
  var table = document.getElementById("myTable");
  var maxRows = prompt("请输入最大显示行数：", "10");
  if (maxRows > 0) {
    for (var i = table.rows.length 1; i > 0 && i > maxRows; i) {
      table.deleteRow(i);
    }
  } else {
    alert("请输入一个正整数！");
  }
}
</script>
</body>
</html>

在这个示例中，我们创建了一个包含 5 行的表格，当用户点击 "设置最大显示行数" 按钮时，会弹出一个提示框让用户输入最大显示行数，我们使用 JavaScript 的 deleteRow 方法删除多余的行，直到达到用户设置的最大行数。

原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/478330.html

本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。