how to change element inside table using java script

Question

I have such a code:

<!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>

I would like to change only these links which are inside the table. Is it possible using js? How to do this?

Suggest using document.querySelectorAll('table.demo a'); to get all your links. — Cyrbil
– Cyrbil, Commented Jun 24, 2015 at 11:49

Arun P Johny · Accepted Answer · 2015-06-24 11:33:55Z

1

Your html is invalid, div can't be a child of table.

Since you are not using any table constructs change the table to 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>

The html rendered when using markup is as shown in the below image, if you look at it the div is rendered outside of the table

enter image description here

edited Jun 24, 2015 at 11:33

answered Jun 24, 2015 at 11:28

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jaros · Accepted Answer · 2015-06-24 11:53:49Z

0

Actually, a div can be inside a td tag.

<!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>

It works then. IBM Websphere Portal uses such a construction.

answered Jun 24, 2015 at 11:53

jaros

3331 gold badge4 silver badges15 bronze badges

Comments

Vinay Balani · Accepted Answer · 2015-06-24 13:05:48Z

0

You should make use of span tag.

<!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>

The button click will change the link using js. You can do any kind of css changes using the id of span. Kindly upvote if this solves your query.

edited Jun 24, 2015 at 13:05

answered Jun 24, 2015 at 12:57

Vinay Balani

638 bronze badges

Collectives™ on Stack Overflow

how to change element inside table using java script

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related