基于某些突出显示的行获取表中的所有数据

时间:2014-01-21 14:35:53

标签: javascript html parsing xpath

这就是场景。我有<table>这样的话:

<table>
    <tr>
        <th>No.</th>
        <th>Name</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Coca cola</td>
        <td>5</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Pepsi</td>
        <td>5</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Water</td>
        <td>3</td>
    </tr>
</table>

现在,用户将突出显示2个第一行。我的任务是提取适当的3 XPaths以获取每列中的数据。

有没有人对此有任何想法?我已经考虑了很多,但还没有找到任何好的解决方案。请帮我。非常感谢。

修改!!!

您可以尝试使用Scraper扩展程序中的Google Chrome了解更多详细信息。我想要的只是有点像它。感谢。

1 个答案:

答案 0 :(得分:1)

假设您在突出显示的行中添加了一个类,并在突出显示您的html DOM后如下:

<table id="highlights">
    <tr>
        <th>No.</th>
        <th>Name</th>
        <th>Price</th>
    </tr>
    <tr class="highlighted">
        <td>1</td>
        <td>Coca cola</td>
        <td>5</td>
    </tr>
    <tr class="highlighted">
        <td>2</td>
        <td>Pepsi</td>
        <td>5</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Water</td>
        <td>3</td>
    </tr>
</table>

如果您在页面中有其他表格,我添加id="highlights"只是为了让它可以解决。那就是你要做的事情:

var noXpath = "//table[@id='highlights']/tbody/tr[@class='highlighted']/td[1]/text()";
var nameXpath = "//table[@id='highlights']/tbody/tr[@class='highlighted']/td[2]/text()";
var priceXpath = "//table[@id='highlights']/tbody/tr[@class='highlighted']/td[3]/text()";

function getData(xpathQuery) {
    var iterator = document.evaluate(xpathQuery, document.body, null, XPathResult.ANY_TYPE, null);
    var nodes = [];
    var node;
    while (node = iterator.iterateNext()) {
        nodes.push(node.nodeValue);
    }
    return nodes;
}
var noData=getData(noXpath);
var namesData=getData(nameXpath);
var priceData=getData(priceXpath);

这是有效的DEMO