html - Using Javascript to set class of parent node with child's text equal to ...? - Stack Overflow

I would like to set the class of several <tr> elements to reset. This should be done by JavaScript. I know that in general manipulating nodes with JavaScript is easy as this:

function changeclass() {
  var trs = document.getElementsByTagName("tr");
  for(var i=0; i<trs.length; i++) {
    trs[i].className = "reset";
  }
};
changeclass();

Now I tried to restrict the selection of <tr> elements to those that entail a <td> that has text equal to reset with the following line doing he selection instead of document.getElementsBy..., which utterly failed:

var trs = document.evaluate( "//td/tr[text()='reset']", document, null, XPathResult.ANY_TYPE, null );

Now I do not know what the problem is, wrong approach? Flaw in my understanding of Javascript? ... ? ... any hints would be appriciated.

I would like to set the class of several <tr> elements to reset. This should be done by JavaScript. I know that in general manipulating nodes with JavaScript is easy as this:

function changeclass() {
  var trs = document.getElementsByTagName("tr");
  for(var i=0; i<trs.length; i++) {
    trs[i].className = "reset";
  }
};
changeclass();

Now I tried to restrict the selection of <tr> elements to those that entail a <td> that has text equal to reset with the following line doing he selection instead of document.getElementsBy..., which utterly failed:

var trs = document.evaluate( "//td/tr[text()='reset']", document, null, XPathResult.ANY_TYPE, null );

Now I do not know what the problem is, wrong approach? Flaw in my understanding of Javascript? ... ? ... any hints would be appriciated.

• javascript
• html
• dom

Share Improve this question Follow asked Dec 14, 2013 at 23:33 petermeissnerpetermeissner 13k66 gold badges6868 silver badges6565 bronze badges 8

• So if they only have "reset" in them, or if they simply contain "reset"? – Qantas 94 Heavy Commented Dec 14, 2013 at 23:37
• 2 Try with document.querySelectorAll, it'll save you some headaches – elclanrs Commented Dec 14, 2013 at 23:38
• @elclanrs Afaik querySelectors can't retrieve innerHTML of an element, they just do queries based on the element's properties/attributes. – Teemu Commented Dec 14, 2013 at 23:41
• 1 @Teemu: I'm not sure what you mean. querySelectorAll gives you a NodeList just like getElementsByTagName, so all you have to do is loop. – elclanrs Commented Dec 14, 2013 at 23:52
• @elclanrs I mean, that basicly OP want's to find a row, which has a td containig the text "reset". querySelectors can't find text within elements, can they? - Nevermind, after seeing your answer I know what you meant : ). – Teemu Commented Dec 14, 2013 at 23:54

 |  Show 3 more ments

7 Answers 7

Sorted by: Reset to default 4

Do it the other way around: find the tds, then access the parents:

var tds=table.getElementsByTagName("td");
for (var i=0;i<tds.length;i++) {
    if (tds[i].innerHTML.indexOf("reset")>=0){
        tds[i].parentNode.className="reset";
    }
}

correct expression is

 var trs = document.evaluate("//tr[td/text()='rest']", document.body, null, XPathResult.ANY_TYPE, null);

also you can access nodes by trs.iterateNext()

Update

after document changing results will be no longer valid. so you can push them in an array and use it after all iterateNext().

var trsx = document.evaluate("//tr[td/text()='rest']", document.body, null, XPathResult.ANY_TYPE, null);
var trs = [];
if (trsx){
    var tr = trsx.iterateNext();
    while(tr){
            trs.push(tr);                   
            tr = trsx.iterateNext();                
    }               
}

for(var i=0; i<trs.length; i++) {
    trs[i].className = "reset";
}

or you can use other XPathResult type.

var trs = document.evaluate("//tr[td/text()='rest']", document.body, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
if (trs){
    for(var i=0; i<trs.snapshotLength; i++){
        tr = trs.snapshotItem(i);
        tr.className = "rest";                  
    }
}

JQuery

 <script src="//ajax.googleapis./ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script>
    $('tr td').each(function(){
      if($(this).html() == 'reset') {
        $(this).parent().addClass('reset');
      )
    });
 </script>

you may want to use jquery and the following code:

$("tr>td").each(function () {   
    $(this).parent().attr('class','reset'); 
});

function changeclass() {
    var trs = document.getElementsByTagName("tr");
    for(var i=0; i<trs.length; i++) {
        var tds = trs[i].getElementsByTagName('td'),
            txt = trs[i].innerHTML.indexOf('reset') != -1;

        if (txt && tds.length) trs[i].className = "reset";
    }
}

changeclass();

A solution with querySelectorAll:

// Query elements as real arrays
var query = function(selector, element) {
  element = element || document;
  return [].slice.call(element.querySelectorAll(selector));
};

var trs = query('tr').filter(function(tr) {
  return query('td', tr).filter(function(td) {
    return td.textContent.trim() == 'reset';
  }).length;
});

Now trs is an array of all tr that contain a td with text "reset".

function changeclass() {
  var trs = document.getElementsByTagName("tr");

    // It has at least one

  for(var i=0; i<trs.length; i++) {
   if (trs[i].firstChild.tagName=="td"&&trs[i].firstChild.text="reset") {
    trs[i].className = "reset";
  }
}
};
changeclass();

this will work on trs that only have first child with tag td

Sources:

• http://www.w3schools./dom/prop_element_firstchild.asp
• http://www.w3schools./jsref/prop_element_tagname.asp