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

Parse an HTML Table returned from an ASP page using AJAX and Extract Specific Cells

本文关键字：HTML 提取 单元格 返回 AJAX ASP 使用      更新时间：2023-09-26

在公司内部网上有一个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抓取数据?

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

这当然是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());
                });
            }
        });
    });

遍历表的行:

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;
    }
}
相关文章：