以子串开头的行

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/