Question

我有DIV，而div里面有桌子。我想使用java脚本更改表的列值之一。我可以通过获取列的元素id 来实现它，但是没有任何id分配到任何表的列。以下是示例。

<div id="usersec">
<TABLE style="TEXT-ALIGN: center; WIDTH: 279px; HEIGHT: 70px">
<TBODY>
<TR>
<TD style="FONT-FAMILY: Verdana" vAlign=center align=middle>Talk to me </TD></TR></TBODY></TABLE>
</div>

是否可以使用javascript更改“与我交谈”文字？

Answer 1

是的，您需要获取元素，然后将新值设置为element.innerHTML。如果您为要更改的元素提供id但是您不需要

，这是最简单的

jsFiddle

<script type="text/javascript">
    var usersec = document.getElementById('usersec');
    var td = usersec.getElementsByTagName('td')[0];
    td.innerHTML = 'New value';
</script>

Answer 2

如果您的用户群是IE8 +，则可以安全地使用querySelector：

var container = document.getElementById('usersec');
var td = container.querySelector('tr:first-child > td');
if(td){
  td.innerHTML = "New Text!";
}

这是一个JSFIDDLE：http://jsfiddle.net/rgthree/YkhwE/

querySelector（或querySelectorAll）允许您通过CSS语法定位DOM中的元素，这非常有用。在当前和以前的每个浏览器中都得到了很好的支持。（通过Can I Use）

Answer 3

您可以为TD分配ID，并使用它;

<div id="usersec">
<TABLE style="TEXT-ALIGN: center; WIDTH: 279px; HEIGHT: 70px">
<TBODY>
<TR>
<TD style="FONT-FAMILY: Verdana" vAlign=center align=middle id="cellToChange">Talk to me</TD>
</TR></TBODY></TABLE>
</div>

<script type="text/javascript">
document.getElementById("cellToChange").innerText = "Go on, talk to me please!";
</script>

如何使用javascript更改HTML元素值？

3 个答案: