javascript - How to grab HTML table content through a userscript? - Stack Overflow

admin管理员组

文章数量:1400731

I'm creating a Greasemonkey script which reads and stores information from a text-based game into a database to use in the future.

What I want is to be able to read the user's stats and turn those stats into variables so that I can proceed with making the information useful.

Here is the source code of the table which I want to grab the stats info from:

<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>

I'm creating a Greasemonkey script which reads and stores information from a text-based game into a database to use in the future.

What I want is to be able to read the user's stats and turn those stats into variables so that I can proceed with making the information useful.

Here is the source code of the table which I want to grab the stats info from:

<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>

Now as you can see the stats don't have identifying class IDs or anything, so I'm not sure how to do this. I only really use PHP, so JavaScript is very new to me but it seems similar to PHP.

Maybe something that says "After <td><b>Strike Action</b></td>, grab the first td value" and then put it as a variable?

NOTE: Strike Action, Defensive Action, Spy Rating, and Sentry Rating are the variables I need.

• javascript
• greasemonkey
• tampermonkey

Share Improve this question Follow edited Feb 18, 2023 at 15:40 double-beep 5,5371919 gold badges4040 silver badges4949 bronze badges asked Nov 15, 2015 at 5:22 Billy RammalBilly Rammal 12311 gold badge22 silver badges88 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

1. Use jQuery to make parsing the table easier.
2. Since you want the rating, don't forget to parse the numbers into javascript integers.
3. If the page is AJAX-driven, use AJAX-aware techniques.

Here is a plete Greasemonkey/Tampermonkey script showing how to do all of that:

// ==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./ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github./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);
}

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

This might be able to to work as well

You would assign it an id and grab it using the getElementById javascript method:

HTML

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

JAVASCRIPT

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

But, if you are trying to get the content from a page that is not your own, xpath is one way to go:

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

That would return an array of all the table rows.

Try something like this (note you will need to use jquery library for this to work)

$(".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);
})

本文标签： javascriptHow to grab HTML table content through a userscriptStack Overflow