以子串開頭的行

Question

我正試圖找到所有具有以'。'開頭的id的行。和一些信件。當我用這個字符串調用getElementsByIdStartsWith時，即使我可以看到（並檢查）它們，也不會返回任何行。

我的錯誤在哪裏？

getElementsByIdStartsWith: function (optionSymbolRoot) { 
     var idArr = []; 

     var trs = document.getElementById("tr"); 

     for(var i=0; i<trs.length; i++) 
     { 
      var s = trs[i].id; 
      if(true == s.startsWith(optionSymbolRoot)) 
       idArr.push(trs[i]); 
     } 

     return idArr; 
    },  
ToggleRow : function(rootId) { 

     var s = "."; 
     var dottedSymbol = s.concat(rootId); 
     //process.stdout.write(dottedSymbol);   

     var rows = this.getElementsByIdStartsWith(dottedSymbol); 
     rows.forEach(function(row) 
     { 

     if (row.style.display == "") { 
      row.style.display = "none"; 
     } 
     else { 
      row.style.display = ""; 
     } 
     }); 
    }, 

Answer 1

功能getDocumentById只會給一個項目，作爲ids應該是唯一的。如果你想得到這種行爲，我建議使用類而不是id或上面的評論中所述的getElementByTagName。

Answer 2

您也可以使用querySelectorAll功能

document.querySelectorAll('#id'); 
// This will return a NodeList with all elements that match the criteria. 

function (optionSymbolRoot) { 
    var idArr = []; 

    var trs = document.querySelectorAll("tr"); 

    for(var i=0; i<trs.length; i++) 
    { 
     var s = trs[i].className; 
     if(true == s.startsWith(optionSymbolRoot)) 
      idArr.push(trs[i]); 
    } 

    return idArr; 
} 

Answer 3

document.getElementById獲取具有指定id屬性的單個元素。要獲取頁面上所有的<tr>標籤，您可以使用getElementsByTagName或querySelectorAll。

var rows = document.getElementsByTagName('tr'); 

//OR 

var rows = document.querySelectorAll('tr'); 

第二種方法是更靈活，因爲它接受任何有效CSS選擇，包括標籤名稱，.classes和#ids，但有點慢。

Answer 4

你可以選擇與querySelectorAll和CSS3 attribute selector:attr^="str"

document.querySelectorAll('tr[id^="str"]') 

的NodeList將需要轉換爲Array

function rowsIdStartsWith(optionSymbolRoot){ 
    var selector = 'tr[id^="' + optionSymbolRoot + '"]' 
    var selected = document.querySelectorAll(selector) 
    return [].slice.call(selected) 
} 

https://jsfiddle.net/ak3jxrLg/