Question

使用纯javascript

我的代码

<div id="all-items">
    <table>

      <tbody>

       <tr title="Text 1"></tr>
       <tr title="Text 2"></tr>
       <tr title="Text 3"></tr>

     </tbody>

    </table>
</div>

我知道jQuery我可以使用

$("#all-items table tbody tr").title

将返回

"Text 1"

但jQuery不能使用我出于某种原因使用的前端框架。另外，我想在表格行的页面上返回标题属性的所有值。

Answer 1

仅使用javascript ...

＆＃13;

var rows = document.getElementById('all-items').getElementsByTagName('tr')
var titles = [];

for (var i = 0; i < rows.length; i++) { 
   titles.push(rows[i].getAttribute("title"));
}

console.log(titles);

＆＃13;

<div id="all-items">
    <table>

      <tbody>

       <tr title="Text 1"></tr>
       <tr title="Text 2"></tr>
       <tr title="Text 3"></tr>

     </tbody>

    </table>
</div>

＆＃13;

Answer 2

@WalksAway答案很好。如果你想重用你的jQuery选择器，你也可以查看 querySelectorAll（）。

＆＃13;

var items = Array.from(document.querySelectorAll("#all-items table tbody tr"));
var titles = items.map(function(item) { return item.title; });
console.log(titles);

＆＃13;

<div id="all-items">
  <table>
    <tbody>
      <tr title="Text 1"></tr>
      <tr title="Text 2"></tr>
      <tr title="Text 3"></tr>
    </tbody>
  </table>
</div>

＆＃13;

获取Id，tbody，tr，title中的所有全局属性值

2 个答案: