javascript - Get values from Tbody

I have tbody that looks like below :

<tbody class="yui-dt-data">
   <tr data-record-id="QB.D.FT1505UD.01.IP" class="rec-QB.D.FT1505UD.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 dealClosed" igtitle="Status: Market Closed#Action: No Action Available">FTSE to be above 6300.36 at 3:10pm</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">0.0</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">2.0</div>
         </div>
      </td>
      <td class="yui-dt-col-netChange" data-column-id="netChange">
         <div class="ig-table-cell-inner yui-dt-liner red" style="width: 69px;">-0.6</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;">6294.7</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>15:08:51</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.FT1505UD.02.IP" class="rec-QB.D.FT1505UD.02.IP">
      <td class="yui-dt-col-market" data-column-id="market">
         <div class="ig-table-cell-inner yui-dt-liner"><a class="tableIcon dealClosed" igtitle="Status: Market Closed#Action: No Action Available">FTSE to be above 6295.36 at 3:10pm</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 Closed#Action: No Action Available" class="dealClosed price priceFlashDown">15.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 Closed#Action: No Action Available" class="dealClosed price priceFlashDown">23.4</div>
         </div>
      </td>
      <td class="yui-dt-col-netChange" data-column-id="netChange">
         <div class="ig-table-cell-inner yui-dt-liner red">-0.6</div>
      </td>
      <td class="yui-dt-col-percentageChange" data-column-id="percentageChange">
         <div class="ig-table-cell-inner yui-dt-liner blue">6294.7</div>
      </td>
      <td class="yui-dt-col-updateTime" data-column-id="updateTime">
         <div class="ig-table-cell-inner yui-dt-liner"><span>15:09:42</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>

And I want get two positions:

market name from <td class="yui-dt-col-market" data-column-id="market">
sell value from <td class="yui-dt-col-sell" data-column-id="sell">

But I have no idea how get it from tbody.

There are two tr obejcts, I think that it should be loaded to array.

Please NOT jQuery solutions.

Any idea?

I have tbody that looks like below :

<tbody class="yui-dt-data">
   <tr data-record-id="QB.D.FT1505UD.01.IP" class="rec-QB.D.FT1505UD.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 dealClosed" igtitle="Status: Market Closed#Action: No Action Available">FTSE to be above 6300.36 at 3:10pm</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">0.0</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">2.0</div>
         </div>
      </td>
      <td class="yui-dt-col-netChange" data-column-id="netChange">
         <div class="ig-table-cell-inner yui-dt-liner red" style="width: 69px;">-0.6</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;">6294.7</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>15:08:51</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.FT1505UD.02.IP" class="rec-QB.D.FT1505UD.02.IP">
      <td class="yui-dt-col-market" data-column-id="market">
         <div class="ig-table-cell-inner yui-dt-liner"><a class="tableIcon dealClosed" igtitle="Status: Market Closed#Action: No Action Available">FTSE to be above 6295.36 at 3:10pm</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 Closed#Action: No Action Available" class="dealClosed price priceFlashDown">15.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 Closed#Action: No Action Available" class="dealClosed price priceFlashDown">23.4</div>
         </div>
      </td>
      <td class="yui-dt-col-netChange" data-column-id="netChange">
         <div class="ig-table-cell-inner yui-dt-liner red">-0.6</div>
      </td>
      <td class="yui-dt-col-percentageChange" data-column-id="percentageChange">
         <div class="ig-table-cell-inner yui-dt-liner blue">6294.7</div>
      </td>
      <td class="yui-dt-col-updateTime" data-column-id="updateTime">
         <div class="ig-table-cell-inner yui-dt-liner"><span>15:09:42</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>

And I want get two positions:

market name from <td class="yui-dt-col-market" data-column-id="market">
sell value from <td class="yui-dt-col-sell" data-column-id="sell">

But I have no idea how get it from tbody.

There are two tr obejcts, I think that it should be loaded to array.

Please NOT jQuery solutions.

Any idea?

Share Improve this question edited Jun 6, 2016 at 15:15 asked Jun 6, 2016 at 14:31 CeZet 1,5136 gold badges24 silver badges44 bronze badges

1 Is jQuery an option? You could just do $('[data-column-id=market]').text() and $('[data-column-id=sell]').text(). – dyagmin Commented Jun 6, 2016 at 14:39
Please in basic JavaScript. I try something like this var tBody = divElement.querySelector('yui-dt-data'); but it does not work – CeZet Commented Jun 6, 2016 at 14:41
jQuery will do this in literally 2 lines of code as @dyagmin suggested, no reason to do this with plain JS. – Angelos Chalaris Commented Jun 6, 2016 at 14:43
I need get this values to object, cause I redirect it to other functions. Like var sellValue = tBody.get..... How to get it ? I think about any loops because in this tbody are many objects and I want catch them all – CeZet Commented Jun 6, 2016 at 14:44

Add a ment |

2 Answers 2

Sorted by: Reset to default 8

You can use this : 1) Get all rows from tbody 2) Get all 'td' from each row

var rows =document.getElementsByTagName("tbody")[0].rows;
for(var i=0;i<rows.length;i++){
var td = rows[i].getElementsByTagName("td")[i];
console.log(td)
}

Than do whatever you want to do with this td object.

Example

Yes you are on the right lines with querySelector, you just need to get the syntax correct by using [data-column-id="market"] to specify an element has an attribute with a certain value:

var data = [];

// loop through all rows
var rows = document.querySelectorAll('table tbody tr');

rows.forEach(function(row) {
  var obj = {};

  // get the td element with attribute data-column-id="market"
  var marketElement = row.querySelector('td[data-column-id="market"]');
  if(marketElement !== null) {
    // exists - set the object property
    // if you need to parse this to extract "FTSE", that is a separate task
    obj.market = marketElement.innerText.trim();
  }

  // get the td element with attribute data-column-id="sell"
  var sellElement = row.querySelector('td[data-column-id="sell"]');
  if(sellElement !== null) {
    // exists - set the object property
    obj.sell = sellElement.innerText.trim();
  }

  // add object to the result array
  data.push(obj);
});

You can make it a little "simpler" by assuming that values will definitely exist in a row, but this could lead to undefined value errors if you aren't careful:

var data = [];
document.querySelectorAll('table tbody tr').forEach(function(row) {
  data.push({
    market: row.querySelector('td[data-column-id="market"]').innerText.trim(),
    sell: row.querySelector('td[data-column-id="sell"]').innerText.trim(),
  });
});

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Get values from Tbody - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)