File "test03.html"

Full Path: /home/analogde/www/Prog/MMM/Fusion/table_selection/test03.html
File size: 1.45 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 
<!--
    https://shivrajan.medium.com/javascript-function-to-highlight-a-table-row-when-its-clicked-1967a483e3c3


    https://stackoverflow.com/questions/72271845/color-tables-row-on-click-using-javascript-and-css
-->

<!DOCTYPE html>
<html>
<head>

<style>
  table, td {
      border:1px solid black;
  }

  tr.selected {
  background-color: yellow;
}


 
     tr {
         background-color: #F00;
     }

</style>

</head>
<body>
<p>Click on each tr element to alert its index position in the table:</p>
<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>

const rows = document.querySelectorAll('table tr');

console.log(rows);

  function myFunction(x) {
      alert("Row index is: " + x.rowIndex);

      //$(x).css('color', 'green'); // change clicked row to active color
      x.style.backgroundColor = "yellow";  
      
     // x.classList.toggle('checked');

      //document.getElementById('x').style.backgroundColor='#003F87';
      
      //x.classList

  }
</script>

<!--
<table border="1" cellspacing="0" cellpadding= "20">
    <tr>
    <td id="id1" ></td>
    </tr>
</table>
<script>
    document.getElementById('id1').style.backgroundColor='#003F87';
</script>
-->
</body>
</html>