0

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
14
Views
5 Years
Discussion Span
Last Post by eburlea
0

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.

0

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?

0

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?

0

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

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

0

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

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

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.