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>

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.

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?

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?

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";
};

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>

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';
    }
}

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.