如何使用javascript抓取HTML表格内容?

时间:2015-11-15 05:22:11

标签: javascript greasemonkey tampermonkey

我正在创建一个Greasemonkey脚本,该脚本将基于文本的游戏中的信息读取并存储到数据库中以供将来使用。

我想要的是能够读取用户的统计数据并将这些统计数据转换为变量,以便我可以继续使信息变得有用。

以下是该表的源代码,我想从中获取统计信息:

<table width="100%">
<tr>
<td width="50%" valign="top" style="padding-right: 25px;">
    <table  class="table_lines" width="100%" cellspacing="0" cellpadding="6" border="0">
    <tr>
        <th colspan="3">Military Effectiveness</th>
    </tr>
    <tr>
        <td><b>Strike Action</b></td>
        <td align="right">16,376,469,657</td>
        <td align="right">Ranked #443</td>
    </tr>
    <tr>
        <td><b>Defensive Action</b></td>
        <td align="right">4,016,716,436</td>
        <td align="right">Ranked #569</td>
    </tr>
    <tr>
        <td><b>Spy Rating</b></td>
        <td align="right">12,245,896</td>
        <td align="right">Ranked #1,204</td>
    </tr>
    <tr>
        <td><b>Sentry Rating</b></td>
        <td align="right">5,291,630,090</td>
        <td align="right">Ranked #831</td>
    </tr>
</table>

现在你可以看到统计数据没有识别类ID或任何东西,所以我不知道如何做到这一点。我只是真的使用PHP,所以JS对我来说很新,但它似乎与PHP类似。

也许有些东西说“在<td><b>Strike Action</b></td>之后,抓住第一个td值”,然后将其作为变量?

注意:罢工行动,防御行动,间谍等级和哨兵等级是我需要的变量。

4 个答案:

答案 0 :(得分:2)

  1. 使用jQuery可以更轻松地解析表格。
  2. 由于您需要评分,请不要忘记将数字解析为javascript整数。
  3. 如果页面是由AJAX驱动的,请使用AJAX-aware techniques
  4. 这是一个完整的Greasemonkey / Tampermonkey脚本,展示如何完成所有这些:

    // ==UserScript==
    // @name     _Parse table information that has low information scent.
    // @include  http://YOUR_SERVER.COM/YOUR_PATH/*
    // @include  http://bilalrammal.ca/clicker/tester.html
    // @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
    // @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
    // @grant    GM_addStyle
    // ==/UserScript==
    /*- The @grant directive is needed to work around a design change
        introduced in GM 1.0.   It restores the sandbox.
    */
    waitForKeyElements (".table_lines", parseMilitaryEffectivenessTable);
    
    function parseMilitaryEffectivenessTable (jNode) {
        //--- Note that :contains() is case-sensitive.
        var strikeAction    = jNode.find ("tr:contains('Strike Action') td:eq(1)").text ();
        var defensiveAction = jNode.find ("tr:contains('Defensive Action') td:eq(1)").text ();
        var spyRating       = jNode.find ("tr:contains('Spy Rating') td:eq(1)").text ();
        var sentryRating    = jNode.find ("tr:contains('Sentry Rating') td:eq(1)").text ();
    
        //--- Convert strings to integers...
        strikeAction        = parseInt (strikeAction   .replace (/\D/g, ""), 10);
        defensiveAction     = parseInt (defensiveAction.replace (/\D/g, ""), 10);
        spyRating           = parseInt (spyRating      .replace (/\D/g, ""), 10);
        sentryRating        = parseInt (sentryRating   .replace (/\D/g, ""), 10);
    
        //--- Show on console:
        console.log ("strikeAction: ",       strikeAction);
        console.log ("defensiveAction: ",    defensiveAction);
        console.log ("spyRating: ",          spyRating);
        console.log ("sentryRating: ",       sentryRating);
    }
    

答案 1 :(得分:1)

您可以为其分配一个ID并使用getElementById javascript方法获取它:

HTML

<div id="something">Test</div>

JAVASCRIPT

var value = document.getElementById("something").value;
//value = "Test";

但是,如果您尝试从不属于您自己的页面获取内容,则xpath是一种方法:

function getElement(path) {
  return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

var rows = getElement("//html[1]/body[1]/table[@class='table_lines']/tr");

这将返回所有表行的数组。

答案 2 :(得分:1)

list.getElementsByTagName("tag").innerHTML = "html text";

这也许能够正​​常工作

答案 3 :(得分:1)

尝试这样的事情(注意你需要使用jquery库来实现这一点)

$(".table_lines").find('tr').each(function (i) {
    var $tds = $(this).find('td'),
        lable = $tds.eq(0).text(),
        value = $tds.eq(1).text(),
        rank = $tds.eq(2).text();
    // do something with lable, value, rank
    alert('Lable: ' + lable + '\nValue: ' + value + '\nRank: ' + rank);
})