Czarq92 Czarq92 - 5 months ago 11
HTML Question

Get value of cell from table HTML

I want to get value from HTML Table.

There is a table which contains three objects (selected which red line) and I want to get values (selected which green line).

enter image description here

I have written now something like that

var divElement = document.querySelector('.panel-shadow-helper-with-shadow');
if(divElement)
{
var divTableBody = divElement.querySelector('.yui-dt-data');

for(i = 0; i < divTableBody.length - 1; i++)
{
var sellValue = divTableBody[i].querySelector(?????);
var buyValue = divTableBody[i].querySelector(?????);

console.log(sellValue, buyValue);
}
}


But I have no idea what to place in
?????
. I want to read
sell
and
buy
values for all objects
QB.D.xxxxxxxx.xx.IP
,
x
are replaced by different numbers.

Any idea?

Answer

Use querySelectorAll instead of querySelector while selecting all of tr elements.

var divElement = document.querySelector('.panel-shadow-helper-with-shadow');
if (divElement) {
  var divTableBody = divElement.querySelectorAll('.yui-dt-data tr');
  for (var i = 0; i < divTableBody.length; i++) {
    var sellValue = divTableBody[i].querySelector('.yui-dt-col-sell').textContent.trim();
    var buyValue = divTableBody[i].querySelector('.yui-dt-col-buy').textContent.trim();
    console.log(sellValue, buyValue);
  }
}
<div id="panel3" class="panel chrome  ig-resizable newPanel panel-shadow-helper-with-shadow" data-panel="" style="min-height: 118px; display: block; z-index: 117; min-width: 159px; top: 43px; left: 223px; height: 350px; width: 1100px;">
  <div class="panelTitleBar">
    <div class="panelTabs tabset tabset-panel">
      <div class="tabset-tab-wrapper">
        <div data-tab="dealingRates" class="tabset-tab-panel tabset-tab tabset-tab-panel-active"><span class="title">Prices</span><span class="tabClose close"></span>
        </div>
      </div>
    </div>
    <div class="chromeControls noDrag">
      <ul class="icons">
        <li class="settings">
          <a igtitle=""></a>
        </li>
        <li class="chartExpand panelExpand hidden">
          <a href="#" data-action="expand" igtitle="Maximise"></a>
        </li>
        <li class="container-tearoff hidden">
          <a href="#" igtitle="Open in new window"></a>
        </li>
        <li class="iClose">
          <a igtitle="Close window"></a>
        </li>
      </ul>
    </div>
  </div>
  <div class="cIframeHolder">
    <div class="view-holder ig-table-parent" data-uid="dealingRates" id="divDealingRates" style="top: 30px;">
      <div class="table-holder-wrapper ig-table-container ig-table-puredeal-container market-list-type-list">
        <div class="searchHeader"></div>
        <div class="resizeWidths dataTablePanel ig-table listView marketList" style="overflow: visible;" id="prices">
          <div class="ig-table-head">
            <table>
              <thead>
                <tr>
                  <th data-column-id="market" class="yui-dt-col-market yui-dt-draggable" igtitle="Drag to move">
                    <div class="ig-table-cell-inner yui-dt-liner yui-resize"><span class="yui-dt-label"><div>Market</div></span>
                      <div class="ig-table-resize-handle"></div>
                    </div>
                  </th>
                  <th data-column-id="lightbulb" class="yui-dt-col-lightbulb yui-dt-draggable" igtitle="A highlighted icon means the signal was recently published#Drag to move">
                    <div class="ig-table-cell-inner yui-dt-liner"><span class="yui-dt-label">&nbsp;</span>
                    </div>
                  </th>
                  <th data-column-id="superNews" class="yui-dt-col-superNews yui-dt-draggable" igtitle="Drag to move">
                    <div class="ig-table-cell-inner yui-dt-liner"><span class="yui-dt-label">&nbsp;</span>
                    </div>
                  </th>
                  <th data-column-id="news" class="yui-dt-col-news yui-dt-draggable" igtitle="Drag to move">
                    <div class="ig-table-cell-inner yui-dt-liner"><span class="yui-dt-label">&nbsp;</span>
                    </div>
                  </th>
                  <th data-column-id="chart" class="yui-dt-col-chart yui-dt-draggable" igtitle="Drag to move">
                    <div class="ig-table-cell-inner yui-dt-liner"><span class="yui-dt-label">&nbsp;</span>
                    </div>
                  </th>
                  <th data-column-id="menu" class="yui-dt-col-menu yui-dt-draggable" igtitle="Drag to move">
                    <div class="ig-table-cell-inner yui-dt-liner"><span class="yui-dt-label">&nbsp;</span>
                    </div>
                  </th>
                  <th data-column-id="displayPeriod" class="yui-dt-col-displayPeriod yui-dt-draggable" igtitle="Drag to move">
                    <div class="ig-table-cell-inner yui-dt-liner yui-resize"><span class="yui-dt-label"><div>Period</div></span>
                      <div class="ig-table-resize-handle"></div>
                    </div>
                  </th>
                  <th data-column-id="sell" class="yui-dt-col-sell yui-dt-draggable" igtitle="Drag to move">
                    <div class="ig-table-cell-inner yui-dt-liner yui-resize"><span class="yui-dt-label"><div>Sell</div></span>
                      <div class="ig-table-resize-handle"></div>
                    </div>
                  </th>
                  <th data-column-id="buy" class="yui-dt-col-buy yui-dt-draggable" igtitle="Drag to move">
                    <div class="ig-table-cell-inner yui-dt-liner yui-resize"><span class="yui-dt-label"><div>Buy</div></span>
                      <div class="ig-table-resize-handle"></div>
                    </div>
                  </th>
                  <th data-column-id="netChange" class="yui-dt-col-netChange yui-dt-draggable" igtitle="Click to sort#Drag to move">
                    <div class="ig-table-cell-inner yui-dt-liner yui-resize"><span class="yui-dt-label"><div>Change</div></span>
                      <div class="ig-table-resize-handle"></div>
                    </div>
                  </th>
                  <th data-column-id="percentageChange" class="yui-dt-col-percentageChange yui-dt-draggable" igtitle="Change on day (percentage)#Drag to move">
                    <div class="ig-table-cell-inner yui-dt-liner yui-resize"><span class="yui-dt-label"><div>% Chg</div></span>
                      <div class="ig-table-resize-handle"></div>
                    </div>
                  </th>
                  <th data-column-id="updateTime" class="yui-dt-col-updateTime yui-dt-draggable" igtitle="Drag to move">
                    <div class="ig-table-cell-inner yui-dt-liner yui-resize"><span class="yui-dt-label"><div>Update</div></span>
                      <div class="ig-table-resize-handle"></div>
                    </div>
                  </th>
                  <th data-column-id="high" class="yui-dt-col-high yui-dt-draggable" igtitle="Drag to move">
                    <div class="ig-table-cell-inner yui-dt-liner yui-resize"><span class="yui-dt-label"><div>High</div></span>
                      <div class="ig-table-resize-handle"></div>
                    </div>
                  </th>
                  <th data-column-id="low" class="yui-dt-col-low yui-dt-draggable" igtitle="Drag to move">
                    <div class="ig-table-cell-inner yui-dt-liner yui-resize"><span class="yui-dt-label"><div>Low</div></span>
                      <div class="ig-table-resize-handle"></div>
                    </div>
                  </th>
                  <th data-column-id="_extra" title="" class="yui-dt-col-_extra">
                    <div class="ig-table-cell-inner yui-dt-liner" style="width: 4000px;"><span class="yui-dt-label">&nbsp;</span>
                    </div>
                  </th>
                </tr>
              </thead>
            </table>
          </div>
          <div class="ig-table-body">
            <table>
              <tbody class="yui-dt-data">
                <tr data-record-id="QB.D.FT1345UD.01.IP" class="rec-QB.D.FT1345UD.01.IP">
                  <td class="yui-dt-col-market" data-column-id="market">
                    <div class="ig-table-cell-inner yui-dt-liner" style="width: 300px;"><a class="tableIcon dealOpen" igtitle="Status: Market Open#Action: Place new Deal">FTSE to be above 6280.28 at 1:50pm</a>
                    </div>
                  </td>
                  <td class="yui-dt-col-lightbulb" data-column-id="lightbulb">
                    <div class="ig-table-cell-inner yui-dt-liner" style="width: 18px;"><a class="signal-status" href="#">&nbsp;</a>
                    </div>
                  </td>
                  <td class="yui-dt-col-superNews" data-column-id="superNews">
                    <div class="ig-table-cell-inner yui-dt-liner" style="width: 18px;"><a class="superNewsIcon off" igtitle="Reuters Info" href="#">&nbsp;</a>
                    </div>
                  </td>
                  <td class="yui-dt-col-news" data-column-id="news">
                    <div class="ig-table-cell-inner yui-dt-liner" style="width: 18px;"><a class="newsIcon off" href="#">&nbsp;</a>
                    </div>
                  </td>
                  <td class="yui-dt-col-chart" data-column-id="chart">
                    <div class="ig-table-cell-inner yui-dt-liner" style="width: 18px;"><a class="basicChartIcon on" href="#" igtitle="Chart">&nbsp;</a>
                    </div>
                  </td>
                  <td class="yui-dt-col-menu" data-column-id="menu">
                    <div class="ig-table-cell-inner yui-dt-liner" style="width: 18px;"><a class="optionsBtn" href="#" igtitle="Click for more options">&nbsp;</a>
                    </div>
                  </td>
                  <td class="yui-dt-col-displayPeriod" data-column-id="displayPeriod">
                    <div class="ig-table-cell-inner yui-dt-liner" igtitle="" style="width: 80px;">06-JUN-16</div>
                  </td>
                  <td class="yui-dt-col-sell" data-column-id="sell">
                    <div class="ig-table-cell-inner yui-dt-liner" style="width: 60px;">
                      <div igtitle="Status: Market Open#Action: Place new Deal" class="dealOpen price priceFlashUp">17.4</div>
                    </div>
                  </td>
                  <td class="yui-dt-col-buy" data-column-id="buy">
                    <div class="ig-table-cell-inner yui-dt-liner" style="width: 60px;">
                      <div igtitle="Status: Market Open#Action: Place new Deal" class="dealOpen price priceFlashUp">22.6</div>
                    </div>
                  </td>
                  <td class="yui-dt-col-netChange" data-column-id="netChange">
                    <div class="ig-table-cell-inner yui-dt-liner blue" style="width: 69px;">0.5</div>
                  </td>
                  <td class="yui-dt-col-percentageChange" data-column-id="percentageChange">
                    <div class="ig-table-cell-inner yui-dt-liner blue" style="width: 68px;">6277.9</div>
                  </td>
                  <td class="yui-dt-col-updateTime" data-column-id="updateTime">
                    <div class="ig-table-cell-inner yui-dt-liner" style="width: 75px;"><span>13:45:31</span>
                    </div>
                  </td>
                  <td class="yui-dt-col-high" data-column-id="high">
                    <div class="ig-table-cell-inner yui-dt-liner" style="width: 60px;"><span>100.0</span>
                    </div>
                  </td>
                  <td class="yui-dt-col-low" data-column-id="low">
                    <div class="ig-table-cell-inner yui-dt-liner" style="width: 60px;"><span>0.0</span>
                    </div>
                  </td>
                  <td class="yui-dt-col-_extra" data-column-id="_extra">
                    <div class="ig-table-cell-inner yui-dt-liner" style="width: 4000px;">&nbsp;</div>
                  </td>
                </tr>
                <tr data-record-id="QB.D.FT1345UD.02.IP" class="rec-QB.D.FT1345UD.02.IP">
                  <td class="yui-dt-col-market" data-column-id="market">
                    <div class="ig-table-cell-inner yui-dt-liner"><a class="tableIcon dealOpen" igtitle="Status: Market Open#Action: Place new Deal">FTSE to be above 6277.28 at 1:50pm</a>
                    </div>
                  </td>
                  <td class="yui-dt-col-lightbulb" data-column-id="lightbulb">
                    <div class="ig-table-cell-inner yui-dt-liner"><a class="signal-status" href="#">&nbsp;</a>
                    </div>
                  </td>
                  <td class="yui-dt-col-superNews" data-column-id="superNews">
                    <div class="ig-table-cell-inner yui-dt-liner"><a class="superNewsIcon off" igtitle="Reuters Info" href="#">&nbsp;</a>
                    </div>
                  </td>
                  <td class="yui-dt-col-news" data-column-id="news">
                    <div class="ig-table-cell-inner yui-dt-liner"><a class="newsIcon off" href="#">&nbsp;</a>
                    </div>
                  </td>
                  <td class="yui-dt-col-chart" data-column-id="chart">
                    <div class="ig-table-cell-inner yui-dt-liner"><a class="basicChartIcon on" href="#" igtitle="Chart">&nbsp;</a>
                    </div>
                  </td>
                  <td class="yui-dt-col-menu" data-column-id="menu">
                    <div class="ig-table-cell-inner yui-dt-liner"><a class="optionsBtn" href="#" igtitle="Click for more options">&nbsp;</a>
                    </div>
                  </td>
                  <td class="yui-dt-col-displayPeriod" data-column-id="displayPeriod">
                    <div class="ig-table-cell-inner yui-dt-liner" igtitle="">06-JUN-16</div>
                  </td>
                  <td class="yui-dt-col-sell" data-column-id="sell">
                    <div class="ig-table-cell-inner yui-dt-liner">
                      <div igtitle="Status: Market Open#Action: Place new Deal" class="dealOpen price priceFlashUp">53.4</div>
                    </div>
                  </td>
                  <td class="yui-dt-col-buy" data-column-id="buy">
                    <div class="ig-table-cell-inner yui-dt-liner">
                      <div igtitle="Status: Market Open#Action: Place new Deal" class="dealOpen price priceFlashUp">60.0</div>
                    </div>
                  </td>
                  <td class="yui-dt-col-netChange" data-column-id="netChange">
                    <div class="ig-table-cell-inner yui-dt-liner blue">0.5</div>
                  </td>
                  <td class="yui-dt-col-percentageChange" data-column-id="percentageChange">
                    <div class="ig-table-cell-inner yui-dt-liner blue">6277.9</div>
                  </td>
                  <td class="yui-dt-col-updateTime" data-column-id="updateTime">
                    <div class="ig-table-cell-inner yui-dt-liner"><span>13:45:32</span>
                    </div>
                  </td>
                  <td class="yui-dt-col-high" data-column-id="high">
                    <div class="ig-table-cell-inner yui-dt-liner"><span>100.0</span>
                    </div>
                  </td>
                  <td class="yui-dt-col-low" data-column-id="low">
                    <div class="ig-table-cell-inner yui-dt-liner"><span>0.0</span>
                    </div>
                  </td>
                  <td class="yui-dt-col-_extra" data-column-id="_extra">
                    <div class="ig-table-cell-inner yui-dt-liner" style="width: 4000px;">&nbsp;</div>
                  </td>
                </tr>
                <tr data-record-id="QB.D.FT1345UD.03.IP" class="rec-QB.D.FT1345UD.03.IP">
                  <td class="yui-dt-col-market" data-column-id="market">
                    <div class="ig-table-cell-inner yui-dt-liner"><a class="tableIcon dealOpen" igtitle="Status: Market Open#Action: Place new Deal">FTSE to be above 6274.28 at 1:50pm</a>
                    </div>
                  </td>
                  <td class="yui-dt-col-lightbulb" data-column-id="lightbulb">
                    <div class="ig-table-cell-inner yui-dt-liner"><a class="signal-status" href="#">&nbsp;</a>
                    </div>
                  </td>
                  <td class="yui-dt-col-superNews" data-column-id="superNews">
                    <div class="ig-table-cell-inner yui-dt-liner"><a class="superNewsIcon off" igtitle="Reuters Info" href="#">&nbsp;</a>
                    </div>
                  </td>
                  <td class="yui-dt-col-news" data-column-id="news">
                    <div class="ig-table-cell-inner yui-dt-liner"><a class="newsIcon off" href="#">&nbsp;</a>
                    </div>
                  </td>
                  <td class="yui-dt-col-chart" data-column-id="chart">
                    <div class="ig-table-cell-inner yui-dt-liner"><a class="basicChartIcon on" href="#" igtitle="Chart">&nbsp;</a>
                    </div>
                  </td>
                  <td class="yui-dt-col-menu" data-column-id="menu">
                    <div class="ig-table-cell-inner yui-dt-liner"><a class="optionsBtn" href="#" igtitle="Click for more options">&nbsp;</a>
                    </div>
                  </td>
                  <td class="yui-dt-col-displayPeriod" data-column-id="displayPeriod">
                    <div class="ig-table-cell-inner yui-dt-liner" igtitle="">06-JUN-16</div>
                  </td>
                  <td class="yui-dt-col-sell" data-column-id="sell">
                    <div class="ig-table-cell-inner yui-dt-liner">
                      <div igtitle="Status: Market Open#Action: Place new Deal" class="dealOpen price priceFlashDown">85.6</div>
                    </div>
                  </td>
                  <td class="yui-dt-col-buy" data-column-id="buy">
                    <div class="ig-table-cell-inner yui-dt-liner">
                      <div igtitle="Status: Market Open#Action: Place new Deal" class="dealOpen price">90.4</div>
                    </div>
                  </td>
                  <td class="yui-dt-col-netChange" data-column-id="netChange">
                    <div class="ig-table-cell-inner yui-dt-liner blue">0.5</div>
                  </td>
                  <td class="yui-dt-col-percentageChange" data-column-id="percentageChange">
                    <div class="ig-table-cell-inner yui-dt-liner blue">6277.9</div>
                  </td>
                  <td class="yui-dt-col-updateTime" data-column-id="updateTime">
                    <div class="ig-table-cell-inner yui-dt-liner"><span>13:45:32</span>
                    </div>
                  </td>
                  <td class="yui-dt-col-high" data-column-id="high">
                    <div class="ig-table-cell-inner yui-dt-liner"><span>100.0</span>
                    </div>
                  </td>
                  <td class="yui-dt-col-low" data-column-id="low">
                    <div class="ig-table-cell-inner yui-dt-liner"><span>0.0</span>
                    </div>
                  </td>
                  <td class="yui-dt-col-_extra" data-column-id="_extra">
                    <div class="ig-table-cell-inner yui-dt-liner" style="width: 4000px;">&nbsp;</div>
                  </td>
                </tr>

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Comments