如何用javascript抓取HTML表格內容？

我正在創建一個Greasemonkey腳本，它可以將基於文本的遊戲中的信息讀取並存儲到數據庫中以供將來使用。如何用javascript抓取HTML表格內容？

我想要的是能夠讀取用戶的統計信息並將這些統計信息轉換爲變量，以便我可以繼續使信息有用。

下面是表的源代碼，這是我想抓住從統計信息：

<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值」，然後把它作爲一個變量？

注：攻擊動作，防守動作，間諜等級和哨兵評級是我需要的變量。

來源

2015-11-15 Billy Rammal

使用jQuery到使分析表更容易。
既然你想要評分，不要忘了把數字解析成javascript整數。
如果頁面是AJAX驅動的，請使用AJAX-aware techniques。

這裏是一個完整的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); 
}

來源

2015-11-15 06:22:42

不客氣，樂意效勞。 –

最後一件事，我如何做到這一點，因此它只能確定td誰的父母的Strike Action價值是誰的價值是「軍事效能」？因爲可能有其他的東西會在頁面上說罷工 –

如果有多個table_lines類的表，並且它們都不是「Military Effectiveness」，那麼調整'waitForKeyElements（）'。類似於：'「.table_lines：包含（'軍事有效性'）」'是一種方式。如果是別的，請提出一個新問題。 –

你會爲它分配一個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");

這將返回所有錶行的數組。

來源

2015-11-15 05:25:42

沒有ID，這就是我說的話：我不能給它分配一個ID我自己，因爲它不是我自己的頁面，它是GreaseMonkey運行的頁面來讀取信息。 –

啊，我誤解了。你可以看看xpath。這將完成工作。 –

是的，這可能會實際工作 - 但我不知道如何實現它..也許第一個變量的例子，我可以得到如何工作 - 我的JavaScript是非常糟糕的 –

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

這也許能工作以及

來源

2015-11-15 05:34:50 spe

這並不接近OP的需求。他想*閱讀*一張桌子。 –

嘗試是這樣的（注意，您將需要使用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); 
})

來源

2015-11-15 06:00:42 naw103

這個答案與另一個似乎是完全合理的，但是當我測試它時，他們不會爲我返回任何東西。jsfiddle上的一個工作示例現在將走很長的路：/ –

我會修改它以保存統計數組。這是一個小提琴： https://jsfiddle.net/mckinleymedia/ecuh255o/ –

@WilliamSchroederMcKinley，請參閱http://jsfiddle.net/mt5taL2b/。 –

如何用javascript抓取HTML表格內容？

回答

相關問題