Question

我正在查看此Getting value from table cell in javascript...not jquery页面上的示例，其中有人展示了如何从JavaScript中的表中获取文本：

var refTab=document.getElementById("ddReferences") 
var  ttl; 
// Loop through all rows and columns of the table and popup alert with the value 
// /content of each cell. 
for ( var i = 0; i<refTab.rows.length; i++ ) { 
  var row = refTab.rows.item(i); 
  for ( var j = 0; j<row.cells.length; j++ ) { 
    var col = row.cells.item(j);
    alert(col.firstChild.innerText); 
  } 
}

我想知道，如果我想简单地抓住第1行第1列的单元格中的文字，我可以不执行以下操作吗？如果没有，为什么不呢？

var myText = document.getElementById("ddReferences").rows.item(0).cells.item(0).firstChild.innerText;

当我在我试图创建的网页中尝试它时，它不起作用。（是的，我知道一个叫做JQuery的东西。我知道有人会告诉我去学习它。也许有一天我会。）

Answer 1

您使用的是FireFox吗？ innerText doesn't work in FireFox（请参阅橙色“有用的回复”）。

链接的Mozialla支持论坛帖子和博客文章都提到使用 textContent 代替 innerText 。虽然这对于一行简单文本可以正常工作，但要注意它们不一样。 textContent 会返回元素中的文本，因为它是在源代码中写入的（忽略标记），而 innerText 会返回在页面上呈现的文本。

例如，使用以下HTML

<table id="ddReferences">
  <tr>
    <td>
      <span>foo bar</span>
    </td>
  </tr>
</table>

两者

document.getElementById("ddReferences").rows.item(0).cells.item(0).firstChild.innerText

和

document.getElementById("ddReferences").rows.item(0).cells.item(0).firstChild.textContent

给你：

foo bar

但是，使用此HTML：

<table id="ddReferences">
  <tr>
    <td>
      <span>foo<br>bar</span>
    </td>
  </tr>
</table>

innerText 为您提供：

foo
bar

而 textContent 为您提供：

foobar

......并使用此HTML：

<table id="ddReferences">
  <tr>
    <td>
      <span>
        foo
        bar
      </span>
    </td>
  </tr>
</table>

innerText 为您提供

foo bar

而 textContent 为您提供

        foo
        bar

做一些小提琴试验，你会看到差异。

Answer 2

问题是innerText是非标准的MS属性，在某些浏览器上不受支持。

标准的或多或少等价物为textContent。

然后，以下内容应该有效：

document.getElementById("ddReferences")
    .rows.item(0)
        .cells.item(0)
            .firstChild
                .textContent;

Demo

如何在不使用jQuery的情况下获取标记内的文本

2 个答案: