Modifying the TR class appears to be ineffective in this instance

Question

Modifying the TR class appears to be ineffective in this instance

I am attempting to update the TR className using JavaScript. However, for some reason it does not appear to be working properly (please note that it must also work in IE8).

<html>
<head>
  <style>
    tr.test {background-color:#000000;margin:0;border:0;padding:0;}
  </style>
  <script>
  _table = document.getElementsByTagName("table")[0];
  _tbody = _table.getElementsByTagName("tbody")[0];
  _tr = _tbody.getElementsByTagName("tr")[0];
  _tr.className="test";
  </script>
</head>
<table>
  <tbody>
    <tr>
    <td></td>
    </tr>    
  </tbody>

</table>
</html>

javascript css

Answer 1

Answer №1

Insert your code below the table element

<html>
<head>
  <style>
    tr.example {background-color:#000000;margin:0;border:0;padding:0;}
  </style>
</head>
<body>
<table>
  <tbody>
    <tr>
    <td></td>
    </tr>    
  </tbody>

</table>
<script>
  _table = document.getElementsByTagName("table")[0];
  _tbody = _table.getElementsByTagName("tbody")[0];
  _tr = _tbody.getElementsByTagName("tr")[0];
  _tr.className="example";
</script>
</body>
</html>

Answer 2

Insert your code below the table element

<html>
<head>
  <style>
    tr.example {background-color:#000000;margin:0;border:0;padding:0;}
  </style>
</head>
<body>
<table>
  <tbody>
    <tr>
    <td></td>
    </tr>    
  </tbody>

</table>
<script>
  _table = document.getElementsByTagName("table")[0];
  _tbody = _table.getElementsByTagName("tbody")[0];
  _tr = _tbody.getElementsByTagName("tr")[0];
  _tr.className="example";
</script>
</body>
</html>

Modifying the TR class appears to be ineffective in this instance

Answer №1

Similar questions

The static page is missing the favicon icon

The Bootstrap button is experiencing difficulties with resizing

CSS - Mysterious Gaps Found in Div Block

Accessing specific documents in Firebase cloud functions using a wildcard notation

Slide one div up when another div is hovered over

Utilize Javascript to acquire the redirected URL

Tips for limiting the size of image uploads to under 2 megabytes

What is the best way to combine text with a PayPal field variable?

How to Sort JSON Data Based on Property in JavaScript

Ways to clear all CSS rules from a class without deleting the class itself using jQuery

Template for Vue.js Component Registration

What does the error "Cannot access property 'length' of null when using 'angular'" mean?

Synchronization-free API and callback functions

Ways to eliminate the gap preceding <br> code

Why isn't my jQuery code functioning properly on Weebly?

Having trouble with the click button flip function? It seems to be working in one section but not in

The problem arises when using `$state.go` as it does not properly transfer the value to `$stateParams`

Struggling to input data into Excel using Selenium WebDriver

Example using Three.js Collada: "file is either empty or does not exist"

Ways to incorporate text into a div container