如何使用 java 脚本更改 table 中的元素

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 can't be a child of table。

由于您没有使用任何 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

之外呈现的

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 更改 link。您可以使用 span 的 id 进行任何类型的 css 更改。如果这解决了您的问题，请点赞。

如何使用 java 脚本更改 table 中的元素

how to change element inside table using java script

html

javascript

html-table