Member Avatar for eburlea

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>
  • 4 Contributors
  • 8 Replies
  • 24K Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by eburlea
Member Avatar for Taywin

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.

Member Avatar for eburlea

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?

Member Avatar for eburlea

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?

Member Avatar for pritaeas

You can set the onmouseover for the tr tag instead.

Member Avatar for eburlea

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";
};
Member Avatar for Bachu

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>
Edited by Bachu
Member Avatar for pritaeas

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';
    }
}
Member Avatar for eburlea

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

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.