使用JavaScript从HTML中刮掉单个表格

Question

这里是我的问题：有一个内部问题跟踪系统，它有一个漂亮的总结页面（开发人员打开的问题数量等）。但是，紧凑的汇总表由样板文件（导航菜单，搜索框等）我想将汇总表嵌入到我们团队的页面中，但不包括周围的文件。使用<iframe>标记将是一个微不足道的解决方案，如果它不是我感兴趣的表格附近的垃圾。幸运的是，所讨论的HTML表格已被很好地描述：它被定义为一个常规<表>标记它甚至有一个唯一的ID分配给它。我想知道是否有一个涉及DOM操作的简单JavaScript技巧，我可以使用它来手术提取我在iframe中感兴趣的表。这样，只要有人检查我们团队的主页，报告就会始终处于最新状态。

Answer 1

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

表是由某种块级元素（a或某物）包围的吗？如果是这样，那么你可以加载页面（AJAX或隐藏的iframe），通过“id”查找表，遍历父级，然后将其html（）值移至目标块。如果没有块级别的父级适合于此，那么您可以尝试在目标位置重新构建一个空表标记，然后从源表中拉出html（）并将其放在那里;然而，事情开始变得有点奇怪，有时是因为一些浏览器以有趣的方式处理表格布局。但可以工作。

Answer 2

对你来说简单一点就可以展开？

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>"); 
       } 
      } 
     } 

Answer 3

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

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

如果他们是在同一个域，那么你很可能使用jQuery的负载与选择：

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