从Tbody获取值

时间:2016-06-06 14:31:24

标签: javascript html

我的tbody如下所示:

<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>

我想得到两个职位:

    来自market

  1. <td class="yui-dt-col-market" data-column-id="market">名称 来自sell

  2. <td class="yui-dt-col-sell" data-column-id="sell">

    但我不知道如何从tbody获得它。

    有两个tr个obejcts,我认为它应该被加载到数组。

    请不要使用jQuery解决方案。

    有什么想法吗?

3 个答案:

答案 0 :(得分:4)

你可以用这个: 1)从tbody获取所有行 2)从每一行获取所有'td'

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)
}

比你想用这个td对象做什么。

Example

答案 1 :(得分:3)

是的,你使用querySelector在正确的行上,你只需要使用[data-column-id="market"]来指定一个元素具有一定值的属性,从而获得正确的语法:

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);
});

你可以做一点&#34;更简单&#34;通过假设值肯定会存在于一行中,但如果您不小心,这可能会导致未定义的值错误:

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(),
  });
});

答案 2 :(得分:0)

如果你可以使用jQuery(老实说我没有看到任何真正的理由不使用,除非这是一个学校作业),这个JSFiddle中展示了一个简单的解决方案:

console.log("Market values:");
var market=[];
$('td.yui-dt-col-market').each(function(i, obj) {
        market.push($(this).text().trim());
    console.log(market[i]);
});
console.log("Sell values:");
var sell=[];
$('td.yui-dt-col-sell').each(function(i, obj) {
        sell.push($(this).text().trim());
    console.log(sell[i]);
});

它的作用是获取指定类的列,并且对于每个列,它获取文本值并将其保存在循环上方创建的值数组中。请记住,如果要使用jQuery,则需要在标题中包含include语句,如下所示:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>