Как получить содержимое таблицы HTML с помощью javascript?

Я создаю сценарий 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>

Теперь, как вы можете видеть, в статистике нет идентифицирующих идентификаторов классов или чего-то еще, поэтому я не уверен, как это сделать. Я действительно использую только PHP, поэтому JS очень нов для меня, но он кажется похожим на PHP.

Может быть, что-то, что говорит: «После <td><b>Strike Action</b></td> возьмите первое значение td», а затем поместите его как переменную?

ПРИМЕЧАНИЕ. Мне нужны переменные «Ударное действие», «Защитное действие», «Рейтинг шпионажа» и «Рейтинг турели».


person Billy Rammal    schedule 15.11.2015    source источник


Ответы (4)


  1. Используйте jQuery, чтобы упростить анализ таблицы.
  2. Поскольку вам нужен рейтинг, не забудьте преобразовать числа в целые числа javascript.
  3. Если страница управляется AJAX, используйте методы, поддерживающие AJAX.

Вот полный скрипт 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);
}
person Brock Adams    schedule 15.11.2015
comment
И последнее, как мне сделать так, чтобы он указывал только значение Strike Action для td who's parent is the th who's value is Military efficiency? Поскольку могут быть другие вещи, которые будут говорить о забастовке на странице - person Billy Rammal; 15.11.2015
comment
Если существует более одной таблицы с классом table_lines, и все они не относятся к категории «Военная эффективность», настройте селектор, используемый в waitForKeyElements(). Что-то вроде: ".table_lines:contains('Military Effectiveness')" в одну сторону. Если это что-то другое, задайте новый вопрос. - person Brock Adams; 15.11.2015

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

Это также может работать

person spe    schedule 15.11.2015
comment
Это не близко к тому, что нужно ОП. Он хочет прочитать таблицу. - person Brock Adams; 15.11.2015

Вы должны присвоить ему идентификатор и получить его, используя метод javascript getElementById:

HTML

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

ЯВАСКРИПТ

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

Это вернет массив всех строк таблицы.

person jrkt    schedule 15.11.2015
comment
Идентификатора нет, вот что я говорю: я не могу сам присвоить ему идентификатор, поскольку это не моя собственная страница, это страница, на которой работает GreaseMonkey для чтения информации. - person Billy Rammal; 15.11.2015
comment
А, я неправильно это понял. Вы можете заглянуть в xpath. Это сделало бы работу. - person jrkt; 15.11.2015
comment
Да, это, вероятно, сработает на самом деле, но я понятия не имею, как это реализовать. Может быть, пример для первой переменной, и я мог бы понять, как с ней работать - мой javascript очень плохой - person Billy Rammal; 15.11.2015

Попробуйте что-то вроде этого (обратите внимание, что вам нужно будет использовать библиотеку 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);
})
person naw103    schedule 15.11.2015
comment
Этот ответ вместе с другим, кажется, имеет смысл, но когда я его проверяю, они ничего мне не возвращают. Рабочий пример на jsfiddle сейчас будет иметь большое значение:/ - person Billy Rammal; 15.11.2015
comment
Я бы изменил это, чтобы сохранить массив статистики. Вот скрипт: jsfiddle.net/mckinleymedia/ecuh255o - person William Schroeder McKinley; 15.11.2015
comment
@ Брок Адамс, Ницца. Я согласен. Проще. Я бы изменил только две вещи: keyValues ​​​​на статистику и связал бы объявления var. - person William Schroeder McKinley; 15.11.2015