2

我正在汇总来自我们所有 Cisco 交换机端口的网络数据，以及来自其他数据库的其他内容，并输出到一个呈现惊人的 HTML 文件（除了我是个白痴，我才意识到我到处都画了“tbody”而不是“头”）： 在此处输入图像描述

我现在只在每个表中显示 10 行数据（它们是分配了 tbody、thead 和 tfoot 标签的 HTML 表；还没有 PHP、Javascript 等，只是纯 HTML）以保持一切整洁和类似（有些交换机有 48 个端口，有些有 24 个等）。我想使用那些“Prev, 1, 2, [...], Next”按钮来循环浏览每个开关的数据，最好不要刷新页面。

我过去使用的是这个设置：

  • 给每个可能的数据集以显示它自己的“div”id
  • 使他们的“style.display”属性='none'（第一页除外）
  • 有一个 Javascript 函数将这些 div 放在一个数组中
  • 该函数可以隐藏和显示 div，并且只显示我作为参数传递的 div
  • 将此函数绑定到 HTML 按钮的 onClick 事件

这是最好的方法吗？由于我正在动态创建这个 HTML（我像老板一样将文本从 C++ 程序输出到 index.html），这意味着将 div ID 分配给许多不同部分的问题，即使这样我也可以创建函数来只更新按钮父级所在的 div？

我认为这是可能的，当然也很耗时，但我不是一个伟大的网络程序员。如果有更好的方法，我想在我花太多时间在这之前先听听。

4

2 回答 2

2

如果您不介意额外的库，数据表将使分页变得容易（并且，正如您所提到的，只需预先填充，然后让 JS 完成工作）。

缺点是它是一个包含库（这意味着要么直接将其包含在 HTML 中，<script>要么找到对它的CDN引用）。好处是分页是内置的，您所需要担心的就是在那里获取数据。然后，通过一些快速配置选项，以及一些可选的 .CSS 更改，您可以获得所需的结果。

于 2013-07-26T19:40:14.207 回答
1

您可以使用事件委托仅设置几个事件处理程序：

var footers = document.getElementsByTagName('tfoot');
for(var i=0; i<footers.length; i++) {
    footers[i].onclick = function(e) {
        console.log(e.target); // the clicked element within the footer
    }
}

这将为每个表格页脚创建一个单击处理程序，您可以通过查看事件对象的target属性（或srcElement在 oldIE 上）来检测单击了哪个按钮。parentElement然后，您可以使用标准属性（如参考MDN ）遍历相对于该元素的 DOM 。

于 2013-07-26T19:38:57.017 回答