how to change color of column in html table using javascript

Question

window.onload = function () {
    var tbl = document.getElementById('tbl');
    var tr = tbl.getElementsByTagName('tr');
    for (var i = 0; i < tr.length; i++) {
        var first_td = tr[i].getElementsByTagName('td')[0];
        first_td.onmouseover = function () {
            hover('on');
        }
        first_td.onmouseout = function () {
            hover('off');
        }
    }
    function hover(state) {
        for (var i = 0; i < tr.length; i++) {
            var first_td = tr[i].getElementsByTagName('td')[0];
            if (state == 'on') {
                first_td.style.color = 'White';
                first_td.style.background = 'RED';
            }
            else if (state == 'off') {
                first_td.style.color = '#000';
                first_td.style.background = '#fff';
            }
        }
    }
}

I do this but this code not working for all table column. in this code there only any one column are worked. other column are not working. please provide the code for the change all the column change color on hover.

Vivek Gupta · Accepted Answer · 2015-06-02 10:24:38Z

2

you are explicitly taking first column element only.replace your script with

var tbl = document.getElementById('tbl');

    var tr = tbl.getElementsByTagName('tr');
    for (var i = 0; i < tr.length; i++) {
        var tdlist=tr[i].getElementsByTagName('td');
        for(var j=0; j<tdlist.length; j++)
        {
            var first_td = tdlist[j];
            first_td.onmouseover = function () {
               hover(this,'on');
            }
             first_td.onmouseout = function () {
               hover(this,'off');
             }
        }
    }
    function hover(obj,state) {
        for (var i = 0; i < tr.length; i++) {
            var first_td = tr[i].getElementsByTagName('td')[obj.cellIndex];
            if (state == 'on') {
                first_td.style.color = 'White';
                first_td.style.background = 'RED';
            }
            else if (state == 'off') {
                first_td.style.color = '#000';
                first_td.style.background = '#fff';
            }
        }
    }

edited Jun 2, 2015 at 10:24

answered May 26, 2015 at 10:32

Vivek Gupta

1,0455 silver badges7 bronze badges

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

4 Comments

Deva Over a year ago

its not correct. i want to change column color on mouse hover. For ex, i have 3 X 3, table. like R0C0, R1C0, R2C0 this is 1st column. R0C1, R1C1, R2C1 2nd column & R0C2, R1C2, R2C2 this 3rd column. if i mouse hove on "C0" column mean 1st column all the C0 column change the color & like all the column.

Deva Over a year ago

Vivek Gupta Over a year ago

Hi @Deva I have modified my answer based on your discussion, Please use this script. However you can use mouseover function on <td> element to achieve this

Vivek Gupta Over a year ago

@Deva Please let me know if it worked for you or not

diadical · Accepted Answer · 2015-05-26 10:32:06Z

You explicitly grab only the first cell here:

var first_td=tr[i].getElementsByTagName('td')[0];

The getElementsByTagName call returns a list of all the td elements, instead of just indexing the first one you will need to loop through the list (as you do with the list of tr's) and set each ones style.

This seems pretty inefficient however - you might want to consider doing this with CSS instead. See this code snippet for an example using CSS:

table {

  border-collapse: collapse;

}

table,

th,

td {

  border: 1px solid black;

}

td {

  padding: 0.5em 1em;

}

td:hover {

  color: white;

  background: blue;

}

<html>

<head>
  <title>Example</title>
</head>

<body>
  <table>
    <tbody>
      <tr>
        <td>One One</td>
        <td>Two One</td>
      </tr>
      <tr>
        <td>One One</td>
        <td>Two One</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

Collectives™ on Stack Overflow

how to change color of column in html table using javascript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related