Question

我有这样的代码：

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Click me</button>

<table class="demo">
    <div>
        <a>link1</a>
        <p>text</p>
    </div>
</table>

<a>link2</a>

<script>
function myFunction() {
    var el = document.getElementsByClassName("demo")[0].getElementsByTagName("a");
    for (var i = 0; i < el.length; i++) {
        el[i].style.color = "red";
 }
}
</script>

</body>
</html>

我想只更改table内的这些链接。是否可以使用js？怎么做？

Answer 1

您的HTML无效，div不能是table的孩子。

由于您未使用任何表格构造，请将table更改为div

function myFunction() {
  var el = document.getElementsByClassName("demo")[0].getElementsByTagName("a");
  for (var i = 0; i < el.length; i++) {
    el[i].style.color = "red";
  }

}

<button onclick="myFunction()">Click me</button>
<div class="demo">
  <div>
    <a>link1</a>
    <p>text</p>
  </div>
</div>
<a>link2</a>

使用标记时呈现的html如下图所示，如果你看一下，div会在table

之外呈现

enter image description here

Answer 2

实际上，div可以在td标签内。

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Click me</button>

<table class="demo">
<tr>
<td>
<div>
<a>link1</a>
<p>text</b>
</div>
</td>
</tr>
</table>
<a>link2</a>

<script>
function myFunction() {
  var el = document.getElementsByClassName("demo")[0].getElementsByTagName("a");
  for (var i = 0; i < el.length; i++) {
      el[i].style.color = "red";
 }

}
</script>

</body>
</html>

然后它起作用。 IBM Websphere Portal使用这样的结构。

Answer 3

您应该使用span标记。

<!DOCTYPE html>
<html>
<body>

<button onclick="myFunction()">Click me</button>

<table class="demo">
<tr>
<td>
<div>
<a><span id="link1">link1</span></a>
<p>text</b>
</div>
</td>
</tr>
</table>
<a>link2</a>

<script>
function myFunction() {
    document.getElementById("link1").innerHTML="abcd";

 }
</script>

</body>
</html>

按钮单击将使用js更改链接。您可以使用span的id进行任何类型的css更改。如果这可以解决您的疑问，请致谢。

如何使用java脚本更改表内的元素

3 个答案: