如何使用javascript获取HTML表内容？

Question

我正在创建一个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值”，然后把它作为一个变量？

注:打击行动，防御行动，间谍等级和士官等级是我需要的变量。

Answer 1

1. 使用jQuery可以简化表的解析。
2. 因为您想要评级，所以不要忘记将数字解析为javascript整数。
3. 如果页面是AJAX驱动的，请使用AJAX感知技术。

下面是，一个完整的Greasemonkey/Tamper猴子脚本，展示了如何做到这一切：

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

Answer 2

您可以为它分配一个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");

返回所有表行的数组。

Answer 3

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

这可能也能起作用