htmlテーブルの各行から属性を抽出します

次の表はHTML形式ですが、テーブルの各行からcall_id属性をプログラムで抽出したいと考えています。htmlテーブルの各行から属性を抽出します

あなたは私が興味を持ってものを見ることができますので、私は、コードと私の編集者からの単純化されたビューの両方を挿入しています：

簡略図：

を、私は全体を取得するには、次の呼び出しを行います

var recordingTable = parent.recordingsFrame.document.getElementById("recordingTable");

：テーブル、その後からデータを取得するために、このオブジェクトを使用したいです

このソリューションでは、私は純粋なjavascriptを目指しており、外部ライブラリの助けを借りていません。

<table cellspacing="1" id="recordingTable"><input id="" name="" type="hidden" value="recordingTable"> 
 
    <thead class="callView"> 
 
     <tr> 
 
      <th> 
 
       <translate>STATE</translate> 
 
      </th> 
 
      <th> 
 
       <translate>Call ID</translate> 
 
      </th> 
 
      <th> 
 
       <translate>Text Type</translate> 
 
      </th> 
 
      <th> 
 
       <translate>Start time</translate> 
 
      </th> 
 
      <th> 
 
       <translate>Call duration</translate> 
 
      </th> 
 
      <th> 
 
       <translate>Radio/Unit ID</translate> 
 
      </th> 
 
      <th> 
 
       <translate>Participant name</translate> 
 
      </th> 
 
      <th> 
 
       <translate>Tag</translate> 
 
      </th> 
 
      <th> 
 
       <translate>Note</translate> 
 
      </th> 
 
      <th> 
 
       <translate></translate> 
 
      </th> 
 
     </tr> 
 
    </thead> 
 
    <tbody class="callView"> 
 
     <tr active="0" archivecount="0" callprovidertype="16" call_id="5" callsempty="false" deleted="false" flags="1" haslink="false" onlinecount="1" screenreccount="0" screensempty="true" issms="false" istext="true" style="background-color: rgb(208, 230, 248);"> 
 
      <td class="spannedCell" style="color: rgb(18, 159, 221);"> 
 
       <div id="pics_scrollPanel"> 
 
        <table cellspacing="0" id="pics"><input id="" name="" type="hidden" value="pics"> 
 
         <thead></thead> 
 
         <tbody> 
 
          <tr> 
 
           <td class="spannedCell"><i class="fa fa-envelope-o iTags" id="smsCallIcon" title="message"></i></td> 
 
           <td class="tableColumn"></td> 
 
           <td class="tableColumn"></td> 
 
           <td class="spannedCell"><span class="icon-dvd-archive-restored spanTags" id="restoredCallIcon" title="restored"></span></td> 
 
           <td class="tableColumn"></td> 
 
          </tr> 
 
         </tbody> 
 
        </table> 
 
       </div> 
 
      </td> 
 
      <td class="spannedCell" style="color: rgb(18, 159, 221);"><span>5</span></td> 
 
      <td class="spannedCell" style="color: rgb(18, 159, 221);"><span></span></td> 
 
      <td class="spannedCell" style="color: rgb(18, 159, 221);"><span>2013-08-06 19:11:24</span></td> 
 
      <td class="spannedCell" style="color: rgb(18, 159, 221);"><span>00:02:00</span></td> 
 
      <td class="spannedCell" style="color: rgb(18, 159, 221);"> 
 
       <div> 
 
        <div>5010</div> 
 
        <div>5010 (Caller)</div> 
 
       </div> 
 
      </td> 
 
      <td class="spannedCell" style="color: rgb(18, 159, 221);"> 
 
       <div> 
 
        <div>Samsung</div> 
 
        <div>Samsung</div> 
 
       </div> 
 
      </td> 
 
      <td class="spannedCell" style="color: rgb(18, 159, 221);"><span></span></td> 
 
      <td class="spannedCell" style="color: rgb(18, 159, 221);"> 
 
       <div title="00 D4 14 86 7E CA 3B 7D 61 20">00 D4 14 8...</div> 
 
      </td> 
 
      <td class="tableColumn" style="color: rgb(18, 159, 221);"></td> 
 
     </tr> 
 
     <tr active="0" archivecount="0" callprovidertype="16" call_id="4" callsempty="false" deleted="false" flags="1" haslink="false" onlinecount="2" screenreccount="0" screensempty="true" issms="false" istext="true"> 
 
      <td class="spannedCell"> 
 
       <div id="pics_scrollPanel"> 
 
        <table cellspacing="0" id="pics"><input id="" name="" type="hidden" value="pics"> 
 
         <thead></thead> 
 
         <tbody> 
 
          <tr> 
 
           <td class="spannedCell"><i class="fa fa-envelope-o iTags" id="smsCallIcon" title="message"></i></td> 
 
           <td class="tableColumn"></td> 
 
           <td class="tableColumn"></td> 
 
           <td class="spannedCell"><span class="icon-dvd-archive-restored spanTags" id="restoredCallIcon" title="restored"></span></td> 
 
           <td class="tableColumn"></td> 
 
          </tr> 
 
         </tbody> 
 
        </table> 
 
       </div> 
 
      </td> 
 
      <td class="spannedCell"><span>4</span></td> 
 
      <td class="spannedCell"><span></span></td> 
 
      <td class="spannedCell"><span>2013-08-06 19:11:17</span></td> 
 
      <td class="spannedCell"><span>00:02:00</span></td> 
 
      <td class="spannedCell"> 
 
       <div> 
 
        <div>8882103</div> 
 
        <div>5006 (Caller)</div> 
 
       </div> 
 
      </td> 
 
      <td class="spannedCell"> 
 
       <div> 
 
        <div>Samsung</div> 
 
        <div>Samsung</div> 
 
       </div> 
 
      </td> 
 
      <td class="spannedCell"><span></span></td> 
 
      <td class="spannedCell"> 
 
       <div title="00 D4 0E 96 7E DF 9E FC 80 F0">00 D4 0E 9...</div> 
 
      </td> 
 
      <td class="tableColumn"></td> 
 
     </tr> 
 
     <tr active="0" archivecount="0" callprovidertype="16" call_id="3" callsempty="false" deleted="false" flags="1" haslink="false" onlinecount="1" screenreccount="0" screensempty="true" issms="false" istext="true"> 
 
      <td class="spannedCell"> 
 
       <div id="pics_scrollPanel"> 
 
        <table cellspacing="0" id="pics"><input id="" name="" type="hidden" value="pics"> 
 
         <thead></thead> 
 
         <tbody> 
 
          <tr> 
 
           <td class="spannedCell"><i class="fa fa-envelope-o iTags" id="smsCallIcon" title="message"></i></td> 
 
           <td class="tableColumn"></td> 
 
           <td class="tableColumn"></td> 
 
           <td class="spannedCell"><span class="icon-dvd-archive-restored spanTags" id="restoredCallIcon" title="restored"></span></td> 
 
           <td class="tableColumn"></td> 
 
          </tr> 
 
         </tbody> 
 
        </table> 
 
       </div> 
 
      </td> 
 
      <td class="spannedCell"><span>3</span></td> 
 
      <td class="spannedCell"><span></span></td> 
 
      <td class="spannedCell"><span>2013-08-06 19:11:11</span></td> 
 
      <td class="spannedCell"><span>00:02:00</span></td> 
 
      <td class="spannedCell"> 
 
       <div> 
 
        <div>5010</div> 
 
        <div>5010 (Caller)</div> 
 
       </div> 
 
      </td> 
 
      <td class="spannedCell"> 
 
       <div> 
 
        <div>Samsung</div> 
 
        <div>Samsung</div> 
 
       </div> 
 
      </td> 
 
      <td class="spannedCell"><span></span></td> 
 
      <td class="spannedCell"> 
 
       <div title="00 D3 F1 16 7E 3D D5 87 80 60">00 D3 F1 1...</div> 
 
      </td> 
 
      <td class="tableColumn"></td> 
 
     </tr> 
 
     <tr active="0" archivecount="0" callprovidertype="16" call_id="2" callsempty="false" deleted="false" flags="1" haslink="false" onlinecount="1" screenreccount="0" screensempty="true" issms="false" istext="true"> 
 
      <td class="spannedCell"> 
 
       <div id="pics_scrollPanel"> 
 
        <table cellspacing="0" id="pics"><input id="" name="" type="hidden" value="pics"> 
 
         <thead></thead> 
 
         <tbody> 
 
          <tr> 
 
           <td class="spannedCell"><i class="fa fa-envelope-o iTags" id="smsCallIcon" title="message"></i></td> 
 
           <td class="tableColumn"></td> 
 
           <td class="tableColumn"></td> 
 
           <td class="spannedCell"><span class="icon-dvd-archive-restored spanTags" id="restoredCallIcon" title="restored"></span></td> 
 
           <td class="tableColumn"></td> 
 
          </tr> 
 
         </tbody> 
 
        </table> 
 
       </div> 
 
      </td> 
 
      <td class="spannedCell"><span>2</span></td> 
 
      <td class="spannedCell"><span></span></td> 
 
      <td class="spannedCell"><span>2013-08-06 19:08:47</span></td> 
 
      <td class="spannedCell"><span>00:02:00</span></td> 
 
      <td class="spannedCell"> 
 
       <div> 
 
        <div>8882107</div> 
 
        <div>5014 (Caller)</div> 
 
       </div> 
 
      </td> 
 
      <td class="spannedCell"> 
 
       <div> 
 
        <div>Samsung</div> 
 
        <div>Samsung</div> 
 
       </div> 
 
      </td> 
 
      <td class="spannedCell"><span></span></td> 
 
      <td class="spannedCell"> 
 
       <div title="20 D4 12 BE 7E 93 E9 4C E1 20">20 D4 12 B...</div> 
 
      </td> 
 
      <td class="tableColumn"></td> 
 
     </tr> 
 
     <tr active="0" archivecount="0" callprovidertype="16" call_id="1" callsempty="false" deleted="false" flags="1" haslink="false" onlinecount="1" screenreccount="0" screensempty="true" issms="false" istext="true"> 
 
      <td class="spannedCell"> 
 
       <div id="pics_scrollPanel"> 
 
        <table cellspacing="0" id="pics"><input id="" name="" type="hidden" value="pics"> 
 
         <thead></thead> 
 
         <tbody> 
 
          <tr> 
 
           <td class="spannedCell"><i class="fa fa-envelope-o iTags" id="smsCallIcon" title="message"></i></td> 
 
           <td class="tableColumn"></td> 
 
           <td class="tableColumn"></td> 
 
           <td class="spannedCell"><span class="icon-dvd-archive-restored spanTags" id="restoredCallIcon" title="restored"></span></td> 
 
           <td class="tableColumn"></td> 
 
          </tr> 
 
         </tbody> 
 
        </table> 
 
       </div> 
 
      </td> 
 
      <td class="spannedCell"><span>1</span></td> 
 
      <td class="spannedCell"><span></span></td> 
 
      <td class="spannedCell"><span>2013-08-06 19:08:47</span></td> 
 
      <td class="spannedCell"><span>00:02:00</span></td> 
 
      <td class="spannedCell"> 
 
       <div> 
 
        <div>8882105</div> 
 
        <div>5010 (Caller)</div> 
 
       </div> 
 
      </td> 
 
      <td class="spannedCell"> 
 
       <div> 
 
        <div>Samsung</div> 
 
        <div>Samsung</div> 
 
       </div> 
 
      </td> 
 
      <td class="spannedCell"><span></span></td> 
 
      <td class="spannedCell"> 
 
       <div title="20 D4 08 66 7E 82 A9 4C E1 20">20 D4 08 6...</div> 
 
      </td> 
 
      <td class="tableColumn"></td> 
 
     </tr> 
 
    </tbody> 
 
</table>

出典

2017-09-13 Harriet

の値。 jQueryを使用できますか？ –

[属性セレクタ]（https://developer.mozilla.org/en）で[Element.querySelectorAll]（https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll）を使用してください-US/docs/Learn/CSS/Introduction_to_CSS/Attribute_selectors）。 – Teemu

[最小、完全、および検証可能なサンプルの作成方法]（https://stackoverflow.com/help/mcve） - コードは最小ではありません –

ここでは、あなたのテーブル内のすべてのCALL_ID値を持って迅速な抜粋です：コードの

var rows = document.querySelectorAll('[call_id]') 

var callIds = Array.prototype.map.call(rows, function(tr){ 
    return tr.getAttribute('call_id') 
}) 

console.log(callIds)

説明：

document.querySelectorAll()はのためのDOMを照会セレクタに一致するすべての要素

map()

セレクタcall_id="<any>"
に一致属性を持つ任意の要素を取得[call_id]を、あった、私が通過する、クラスメソッドのマップを呼び出すために、アレイのプロトタイプを使用しthis値として結果に
map()が、この場合には、どのようなコールバック戻ると新しい配列を返す。これは、jQueryを使って容易であるcall_id

出典

2017-09-13 07:10:46

ジュリアンに答える時間をとってくれてありがとう - ソリューションは完璧に機能します。私は、レコード参照の代わりに私のrecordingTableオブジェクトを挿入した後、私の情報を配列に抽出します。 :)幸せ！ – Harriet

htmlテーブルの各行から属性を抽出します

答えて

関連する問題