使用 JavaScript 从 HTML 中抓取单个表格答案

【问题标题】：Scraping single table from HTML using JavaScript使用 JavaScript 从 HTML 中抓取单个表格
【发布时间】：2009-10-16 22:42:02
【问题描述】：

这是我的问题：有一个内部问题跟踪系统，它有一个漂亮的摘要页面（按开发人员划分的未解决问题的数量等）但是，紧凑的摘要表被样板文件包围（导航菜单、搜索框、等）我想在我们团队的页面上嵌入汇总表，而不是周围的杂物。使用标记将是一个简单的解决方案，如果不是因为我感兴趣的表格周围的杂物。幸运的是，有问题的 HTML 表格被很好地描述：它是用常规的 <table> 标记定义的它甚至分配了一个唯一的ID。我想知道是否有一个简单的涉及 DOM 操作的 JavaScript 技巧，我可以使用它在 iframe 中通过外科手术提取我感兴趣的表。这样一来，每当有人查看我们团队的主页时，报告始终是最新的。 <p>【问题讨论】：</p> <div class="cmets"> <ul class="comlist"></ul> </div> </table>

标签： javascript html dom

【解决方案1】：

如果你使用 jQuery，你可以很容易地拉取表格代码。现在，如果表中包含很少的脚本块，事情可能会变得很奇怪；同样，如果它依赖于某些样式表，请确保您的目标页面也有这些样式表。

表格是否被某种块级元素（a 或其他东西）包围？如果是这样，那么您可以加载页面（AJAX 或隐藏 iframe），通过“id”查找表，遍历父级，然后将其 html() 值移动到目标块。如果没有适合的块级父级，那么您可以尝试在目的地重建一个空表标签，然后从源表中拉出 html() 并将其放在那里；然而，有时事情开始变得有点奇怪，因为一些浏览器以有趣的方式处理表格布局。不过可能有用。

【讨论】：

这就是我所做的，增加了将附件上传到问题跟踪器的附加技巧，以便我的 JavaScript 可以从与摘要报告相同的域提供。

【解决方案2】：

团队和问题跟踪器是否在同一个域/地址上？

如果不是，那么您可能必须修改问题跟踪器才能获得所需的结果。出于安全原因，大多数浏览器不允许您跨不同域进行修改/访问。

如果它们在同一个域中，那么您可能会使用带有选择器的 jQuery 加载：

$("#destination").load("/path/to/table/ #tableid");

【讨论】：

是的，这真是个好主意——我忘了 load() 的选择器技巧。

【解决方案3】：

有什么简单的可以扩展的吗？

function scrapeTable(tableId)
        {
            var tables = document.getElementsByTagName("table");
            for (var i = 0; i < tables.length; i++)
            {
                if (tables[i].id == tableId)
                {
                    alert("<table>" + tables[i].innerHTML + "</table>");
                }
            }
        }

【讨论】：

这行得通，但表格的“innerHTML()”不会包含表格标签本身。如果浏览器可以将表格内容放入新建的（空）表格中，这可能不是什么大问题。