Changing table background color with Javascript

Question

eburlea 23 Junior Poster

12 Years Ago

Hello. Please advise what is wrong in the following code that align and border attributes change when mouse is over the table, except the background color.

<table id="myTable" width="200px" cellpadding="0px" cellspacing="0px">
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<script>
myTable.onmouseover = function(){
  myTable.setAttribute("align","center");
  myTable.setAttribute("border","1px solid");
  myTable.setAttribute("bgcolor","#FF0000");
};
</script>

javascript

4 Contributors
8 Replies
24K Views
1 Day Discussion Span
Latest Post 12 Years Ago Latest Post by eburlea

Taywin 312 Posting Virtuoso

12 Years Ago

The background display in a table is from each table cell, not from the table itself. If you want to change the color, you need to change in each table cell (td), not from table tag.

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

You can set the onmouseover for the tr tag instead.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

eburlea 23 Junior Poster · Answer 1 · 2012-10-16T19:06:53+00:00

I have changed
myTable.setAttribute("bgcolor","#FF0000");
with
document.getElementById('myTable').style.backgroundColor = color;
and it works for the whole table.
Are there any other solutions?

eburlea 23 Junior Poster · Answer 2 · 2012-10-17T08:38:33+00:00

The statement
document.getElementById('myTable').style.backgroundColor = color;
colores the whole table.
What else should be included in the code, so that only one row to be colored?

eburlea 23 Junior Poster · Answer 3 · 2012-10-17T09:10:09+00:00

I've tried this and it doesn't work:

document.getElementsByTagName('tr').onmouseover = function(){
  document.getElementsByTagName('tr').style.backgroundColor = "#FF0000";
};
document.getElementsByTagName('tr').onmouseout = function(){
  document.getElementsByTagName('tr').style.backgroundColor = "#FFFFFF";
};

Bachu 45 Newbie Poster · Answer 4 · 2012-10-17T10:28:57+00:00

Try this Exg :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table Exg</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
<table id="myTable" width="200px" cellpadding="0px" cellspacing="0px">
  <tr>
    <td>One</td>
    <td>Two</td>
    <td>Three</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>
<script type="text/javascript">
$(function(){
    $('#myTable').mouseover(function() {
        $(this).css('text-align','center');
        $(this).css('border','1px solid');
        $(this).css("background-color","#FF0000");
    });

    $('#myTable').mouseout(function() {
        $(this).css('text-align','left');
        $(this).css('border','0px');
        $(this).css("background-color","#FFFFFF");
    });
});
</script>

</body>
</html>

pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster · Answer 5 · 2012-10-17T10:43:27+00:00

getElementsByTagName returns a list, so you should do:

var MyTable = document.getElementById('myTable');
var rows = MyTable.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
    rows[i].onmouseover = function() {
        this.style.backgroundColor = '#ff0000';
    }
    rows[i].onmouseout = function() {
        this.style.backgroundColor = '#ffffff';
    }
}

eburlea 23 Junior Poster · Answer 6 · 2012-10-17T19:14:25+00:00

Yes, you are perfectly right. getElementsByTagName returns an array. I didn't think about that. Thanks a lot. It is working.