table row onmouseover to change background color

I hava a table that has a onmouseover and onmouseout on the tr.  If the rows dont have a color then the onmouseover and onmouseout will change color when i scroll the mouse over a tabel row.  But if the table row has been defined a color in the beginning then the color will not change at all.
I know you can change it using css, but i really need to use style method b/c i'm making a dynamic control and the color is fixed.
I dont understand why it works when i dont define a backgorundcolor in the td tags but fails when their is one.

      <table>
          <tbody>
              <tr >
                  <th style="font-family: fixed,helvetica,courier,system,times; background-color: rgb(245, 245, 220);
                      color: rgb(0, 0, 0); font-weight: normal; text-align: center; width: 80px;">
                      Grid ID</th>
                  <th style="font-family: fixed,helvetica,courier,system,times; background-color: rgb(245, 245, 220);
                      color: rgb(0, 0, 0); font-weight: normal; text-align: right; display: none; width: 115px;">
                      Title</th>
                  <th style="font-family: fixed,helvetica,courier,system,times; background-color: rgb(245, 245, 220);
                      color: rgb(0, 0, 0); font-weight: normal; text-align: left; width: 300px;">
                      Description</th>
              </tr>
              <tr onmouseover="this.style.backgroundColor='#dddddd'; this.style.cursor='pointer';"
               onmouseout="this.style.backgroundColor='#ffffff'; this.style.cursor='default';" >
                  <td style="border-color: rgb(128, 128, 128); background-color: rgb(220, 220, 220);
                      color: rgb(0, 0, 0); font-family: fixed,helvetica,courier,system,times; text-align: center;
                      width: 80px; font-weight: normal;">
                      0750</td>
                  <td style="border-color: rgb(128, 128, 128); background-color: rgb(220, 220, 220);
                      color: rgb(0, 0, 0); font-family: fixed,helvetica,courier,system,times; text-align: right;
                      display: none; width: 115px; font-weight: normal;">
                      Title Name 0750</td>
                  <td style="border-color: rgb(128, 128, 128); background-color: rgb(220, 220, 220);
                      color: rgb(0, 0, 0); font-family: fixed,helvetica,courier,system,times; text-align: left;
                      width: 300px; font-weight: normal;">
                      Description 0750</td>
              </tr>
              <tr onmouseover="this.style.backgroundColor='#dddddd'; this.style.cursor='pointer';"
               onmouseout="this.style.backgroundColor='#ffffff'; this.style.cursor='default';" >
                  <td style="border-color: rgb(128, 128, 128); background-color: rgb(238, 238, 238);
                      color: rgb(0, 0, 0); font-family: fixed,helvetica,courier,system,times; text-align: center;
                      width: 80px; font-weight: normal;">
                      1750</td>
                  <td style="border-color: rgb(128, 128, 128); background-color: rgb(238, 238, 238);
                      color: rgb(0, 0, 0); font-family: fixed,helvetica,courier,system,times; text-align: right;
                      display: none; width: 115px; font-weight: normal;">
                      Title Name 1750</td>
                  <td style="border-color: rgb(128, 128, 128); background-color: rgb(238, 238, 238);
                      color: rgb(0, 0, 0); font-family: fixed,helvetica,courier,system,times; text-align: left;
                      width: 300px; font-weight: normal;">
                      Description 1750</td>
              </tr>
...
borg48Asked:
Who is Participating?
 
TNameCommented:
Because you're assigning the background color to the *row*, and the cells are "on top" of the row. If the cells have a bg color assigned, you can't see the row's color... You could change the coor of the TDs instead - of one td
  <td onmouseover="this.style.backgroundColor='#f00';...
or even the color of all cells of a row, depending on your intentions.
0
 
borg48Author Commented:
Thank you for explaining it
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.