獲得一個ID，TBODY，TR中的所有全局屬性值，標題

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不工作機智h我出於某種原因使用了我的前端框架。另外，我想返回表格行內頁面上標題屬性的所有值。只有

Answer 1

使用JavaScript ...

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

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

 
     <tbody> 
 

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

 
    </tbody> 
 

 
    </table> 
 
</div>

Answer 2

的@WalksAway答案是罰款。如果你想重用你的jQuery選擇器，你也可以看看querySelectorAll（）。

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

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