使用 AJAX 解析从 ASP 页面返回的 HTML 表并提取特定单元格

Posted 2023-05-09

【中文标题】使用 AJAX 解析从 ASP 页面返回的 HTML 表并提取特定单元格

【英文标题】：Parse an HTML Table returned from an ASP page using AJAX and Extract Specific Cells

【发布时间】：2011-12-19 21:32:34

【问题描述】：

工作 Intranet 上有一个 ASP 页面，它返回来自众多传感器的数据。数据以表格形式呈现，具有多行和多列。

我认为如果我能在我们部门的网站上显示一些输出结果会很酷。

我想使用 ajax 打开 ASP 页面并从结果表中获取一些数据点。

使用 AJAX 打开页面很容易，但我不知道之后该怎么做。

表格的格式如下：

<table>
  <tr>
    <td>Data ID 1</td>
    <td>Description</td>
    <td>Data</td>
  </tr>
  <tr>
    <td>Data ID 2</td>
    <td>Description</td>
    <td>Data</td>
  </tr>
</table>

每一行的第一个单元格是唯一的ID，那么同一行的第5列就是我想要的值。

function loadXMLDoc()

    var xmlhttp;

    if (window.XMLHttpRequest) // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
     else // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        

    xmlhttp.onreadystatechange=function() 
        if (xmlhttp.readyState==4 && xmlhttp.status==200) 
            document.getElementById("testDiv").innerhtml=xmlhttp.responseText;
        
    

    xmlhttp.open("GET","http://plantdata/showData.asp",true);
    xmlhttp.send();

如何通过唯一 ID 获取数据？

【参考方案1】：

xmlhttp.onreadystatechange=function() 
  if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    var target = document.getElementById("testDiv");
    target.innerHTML = xmlhttp.responseText;
    extractIDs(target);
  


function extractIDs(container) 
  var trs = container.getElementsByTagName("TR");

  for (var i=0; i<trs.length; i++) 
    var tds = trs[i].getElementsByTagName("TD"),
        txt = tds[0].textContent || tds[0].innerText;  // innerText for IE

    alert("row " + (i+1) + ": " + txt);
   
;

【讨论】：

这个问题是我想避免在主页上实际显示整个表格。我只想显示某些行。我需要检索文档，并在不先显示的情况下对其进行搜索。

@SharpBarb 好吧，将其加载到带有display: none; 的容器中。问题解决了。

【参考方案2】：

这肯定是 jQuery 的工作。我可以看看输出，然后我会告诉你答案，但它是沿着这些思路：

$(document).ready(function () 
        $.ajax(
            url: "TableData.html",
            type: "GET",
            success: function (data) 
                var tempData = $(data);
                //alert(tempData.html());

                tempData.find("tr td[id]").each(function (i) 
                    alert($(this).siblings(":nth-child(5n)").text());
                );
            
        );
    );

【讨论】：

我有点希望有一个不使用 jQuery 的解决方案。

@SharpBarb - 为什么？让它完成繁重的工作。

这有什么问题？它是一个跨浏览器工具箱，可简化您的开发。它没有那么重。它产生简单的代码（见 Sam 的回答）。

@SharpBarb - 如果你想使用 jQuery，我已经编辑了我的帖子来满足你的需要。

@Zopieux 我完全支持 jQuery，但它的问题是人们也应该知道如何在没有它的情况下实现目标。

【参考方案3】：

遍历表格的行：

var data;
var rows=document.getElementById("testDiv").getElementsByTagName('table')[0].rows;
for(var i=0; i<rows.length; ++i)

    var cells=rows[i].cells;
    if(cells[0].innerHTML == uniqueID)
    
        data=cells[4].innerHTML;
        break;