Question

我想将几个<tr>元素的类设置为reset。这应该通过JavaScript完成。我知道通常使用JavaScript操作节点很简单：

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

现在，我尝试将<tr>元素的选择限制为包含文本等于<td>的{{1}}的元素，并选择以下行代替reset完全失败了：

document.getElementsBy...

现在我不知道问题是什么，错误的做法？我对Javascript的理解缺陷？ ......？ ......任何提示都会受到影响。

Answer 1

反过来说：找到tds，然后访问父母：

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";
    }
}

Answer 2

正确的表达是

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

您也可以trs.iterateNext()

访问节点

<强>更新

文件更改后的结果将不再有效。所以你可以将它们推入数组并在所有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";
}

或者您可以使用其他XPathResult类型。

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";                  
    }
}

Answer 3

JQuery的

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

Answer 4

您可能想使用jquery和以下代码：

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

Answer 5

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

Answer 6

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

现在trs是包含tr文字td的所有"reset"的数组。

Answer 7

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

这适用于只有第一个标记为tr

的子项的td

来源：

使用Javascript设置父节点的类，子节点的文本等于......？

7 个答案: