Javascript 从Tbody获取值

我有如下的

t正文

：

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

2016年6月6日
0
2
-0.6
6294.7
15:08:51
100
0
2016年6月6日
15.6
23.4
-0.6
6294.7
15:09:42
100
0

我想得到两个职位：

市场

名称来自

出售
来自

但我不知道如何从

tbody

获得它

有两个

tr

obejcts，我认为应该将其加载到数组中

请不要使用jQuery解决方案

---

有什么想法吗？

是的，如果使用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);
});

通过假设值肯定存在于一行中，您可以使它变得更“简单”，但如果您不小心，这可能会导致未定义的值错误：

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

您可以使用以下选项： 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)
}

var rows=document.getElementsByTagName（“tbody”）[0]。行；
对于（var i=0；i，如果您可以使用jQuery（老实说，我看不出任何不使用jQuery的真正原因，除非这是一项学校作业），有一个足够简单的解决方案：

这样做的目的是获取指定类的列，并为每个类获取文本值，并将其保存在循环上方创建的值数组中。请记住，如果要使用jQuery，则需要在标头中使用include语句，如下所示：

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


jQuery是一个选项吗？你可以只做
$（'[data column id=market]'）.text（）
和
$（'[data column id=sell]'）.text（）
。请使用basic
JavaScript
。我尝试了类似的方法
var tBody=divElement.querySelector（'yui-dt-data'））；
但它不起作用jQuery会像@dyagmin建议的那样用两行代码来实现这一点，没有理由用普通的JS来实现。我需要将这个值获取到object，因为我将它重定向到其他函数。比如
var sellValue=tBody.get…
。如何获取它？我考虑任何循环，因为在这个
tBody
中有很多对象s，我想捕获它们allIt太复杂了…没有其他最简单的方法来获取这些值？它并不复杂，只是有点冗长，已经更新了一个较短但可能更危险的版本。即使使用jquery也会使它更干净。请查看vinni注释，我想这样获取它，但需要（tbody元素）和值
market
和
sell
。对于
market
ex:
FTSE在下午4:10高于6298.36，对于
sell`ex:
2.0
是的，这正是您所拥有的。您的意思是您有多个
tbody
元素？这与您在问题中所写的不匹配，但您可以使用相同的想法来扩展你要自己在
tbody
s中循环，然后是他们的
tr
sRhumborl我的意思是在
tbody
中，我有许多元素（许多市场包含卖出或买入价格的数据），我想为每个元素（每个市场）加载这些信息（市场名称、卖出、买入）是的，我需要这样的东西，但它不起作用：/它的工作条件是包含在中。好的，但它只得到行，我需要
并且只得到名
富时指数在下午4:10pm
时高于6298.36，值来自
…yu dt col buy
像值
2.0
名
dealPrice
。不完整的行我看到了哪个例子您添加了，但有完整的信息行，我只需要
市场
和
销售
价值。我已经更新了示例，您可以根据需要将其更改为a/c。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>