外部HTMLからテーブルの情報を抽出する

Question

私は、テーブルを含むWebページから情報をスクラップするためのGMスクリプトを作成しています（idが1つしかなく、IDはありません）、そのテーブルからいくつかの情報を追加します既存のウェブページに追加する。私はGM_xmlhttprequestから得たファイルから情報を抽出する以外はすべて動作させています。

GM_xmlhttpRequest({ 
    method: 'GET', 
    url: tableToBeScrape, 
    onload: function (response) { 
    var respDoc = response.responseText; 
    console.log(respDoc); 
    alert(respDoc); 
    } 
}); 

respDocは完全なHTML形式でWebページを返します。しかし、私は情報を抽出するのが難しかった。私は、アレイの外に何も持っていないlistAllArrayを通してループとループの使用のいくつかの方法

var listAllArray = []; 
responseHTML = new DOMParser().parseFromString(response.responseText, 'text/html'); 
listAllArray = responseHTML.getElementsByClassName('table table-bordered table-striped table-condensed'); 

をしようとしました。ここで

は、HTMLは、私はテーブルのうち、パートID、シリアル番号と場所を抽出するにはどうすればよい

<table class="table table-bordered table-striped table-condensed"> 
    <thead> 
     <tr> 
      <th>Part ID</th> 
      <th>Serial Number</th> 
      ... 
      <th>Location</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      ... 
      <td>123</td> 
      <td>sn123456</td> 
      ... 
      <td>shelf 12</td> 

     </tr> 
    </tbody> 
</table> 

どのように見えるかですか？

パート2： 私がresponse.responseTextから得た応答は、私が想定したものと異なりました。テーブルはありませんでしたが、むしろdiv ul liです。

<div class='search_refinements' data-collapsed='true'  data-role='collapsible'> 
<h4>Refine Your Results</h4> 
<ul data-filter='true' data-role='listview'> 
<li data-role='list-divider'>Company Name</li> 
<li> ACB Inc. </li> 
... 
<li data-role='list-divider'>Part</li> 
<li> 123 </li> 
<li data-role='list-divider'>Serial Number</li> 
<li> sn123456</li> 
... 
<li data-role='list-divider'>Location</li> 
<li> shelf 12</li> 
</ul> 
</div> 

Answer 1

あなたは

jQueryをタグ付けしているので、あなたはそれを解析してDOM要素を作成し、必要なものは何でも見つけることができます。

var tableDom = $(response.responseText); 
var th = tableDom.find('th'); 
var td = tableDom.find('td'); 

今すぐあなただけの

を使用することによって、あなたがしたい列の値を取得することができ tdを反復し、すべてのjQueryオブジェクトの text()を取得、またはすべての生のDOMオブジェクト

var data = {}; 
td.each(function(item,idx){ 
    data[th[idx].innerText] = item.innerText; 
}); 

のinnerText

data["some column name"]; 

Answer 2

jQueryを使用している場合、

あなたがこれを行うことができます

、

var table = $(response.responseText).find("table").find("tbody"); 

var rows = table.find('tr'); 
rows.each(function(index, row){ 
    var columns = $(row).find('td'); 
    var partId = columns.eq(0).html(); 
    var serialNumber = columns.eq(1).html(); 
    var location = columns.eq(2).html(); 

    console.log("Part Id : " + partId); 
    console.log("Serial Number : " + serialNumber); 
    console.log("Location : " + location); 
});