Question

我希望从主题中获取价值，但是该单元格具有元素<a>1</a>，并且在此元素中是值。

我试过这样的事情：

function filter(gvId) {
  var table = document.getElementById(gvId);

  for (var c = 1; c < table.rows[2].cells.length; c++) {
    for (var r = headerNumber; r < table.rows.length; r++) {
      var value = table.rows[r].cells[c].getElementsByClassName("a").innerHTML;
      console.log(value); //and it should show me :
      //1
      //2
      //3
      //4
    }
  }
}

<table>
  <tbody>
    <tr>
      <td><a>1</a>
      </td>
      <td><a>2</a>
      </td>
    </tr>
    <tr>
      <td><a>3</a>
      </td>
      <td><a>4</a>
      </td>
    </tr>
  </tbody>
</table>

在单元格内没有<a>标记的情况下，所有内容都有效。但现在我不知道如何获得这个价值。

Answer 1

使用.textContent代替.innerHTML

获取元素的文字内容

var value = table.rows[r].cells[c].textContent;

文档here和here

Answer 2

在您的情况下，问题是连续的：

var value = table.rows[r].cells[c].getElementsByClassName("a").innerHTML;

因为您尝试按类匹配元素，而不是按元素标记匹配。链接标记<a>没有className a。您当前的代码适用于：<a class="a">1</a>或<div class="a"></div>。

您可以尝试使用querySelector之类的东西吗？像：

var value = table.rows[r].cells[c].querySelector('a').innerHTML;

请同时查看有关getElementsByClassName和querySelector

的MDN文档

UPD：所有代码都可以简化：

var contentLinks = table.querySelectorAll('td a');
contentLinks.forEach(function(item) {
    var value = item.innerHTML;
    console.log(value);
});

Answer 3

为什么不直接使用jQuery？它比您的代码更容易，更有效：

$("table a").each(function(){
    console.log($(this).html());
});

从单元格及其内部元素JS中获取价值

3 个答案: