Home/ Questions/Q 6017157
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T03:05:18+00:00

In my index.html page, I have an empty table defined as following: <body> …

  • 0

In my index.html page, I have an empty table defined as following:

<body>
  ...
  <table width="500" border="0" cellpadding="1" cellspacing="0" class="mytable">
      <tr></tr>
  </table>
  <script src="my.js"></script>
</body>

As you saw above, there is an JavaScript file my.js is included.

my.js(which is used to update the table row):

var items = ARRAY_OF_OBJECTS_FROM_SERVER; //e.g. items=[{'John', '023567'},{'Bill', '055534'},...];

//Each object element in the "items" array contain "name" and "phone" attribute.

var mytable = $('.mytable tr:first');
for(var i=0; i<items.length; i++){
   var obj = items[i];
   mytable.after("<tr>");
   mytable.after("<td>&nbsp;</td>");
   mytable.after(" <td>"+obj.name+"</td>");         
   mytable.after("<td>"+obj.phone+"</td>");
   mytable.after("</tr>");
}

I successfully get the dynamical table working, but when I try to add mouse hover effect on each row, I just failed. What I tried is by using CSS:

.mytable tr:hover
{ 
  background-color: #632a2a;
  color: #fff;
}

I would like the mouse hover with color highlight effect to be working on IE 7+, firefox and chrome, what is the correct way to implement the table row mouse hover effect in my case??

—-EDIT—-

Here is my index.html page:

index.html

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>my test</title>
<link href="mystyle.css" rel="stylesheet" type="text/css" media="screen" />
</head>
 <body>
      <table width="500" border="0" cellpadding="1" cellspacing="0" class="mytable">
          <tr>
          </tr>
      </table>
  <script src="my.js"></script>
  </body>
</html>

–SOLUTION—-

@manji ‘s solution solved my problem. That’s change in JavaScript to use append instead of after inside for loop. Then, the CSS way of highlighting row is working.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are writing the <td> outside of <tr> with this:

    mytable.after("<tr>");
mytable.after("<td>&nbsp;</td>");
mytable.after(" <td>"+obj.name+"</td>");         
mytable.after("<td>"+obj.phone+"</td>");
mytable.after("</tr>");

    For example, first one will add a <tr> and close it, then 3 closed <td>s before the <tr> and the last one is incorrect and will have no effect.

    Try it this way and it will work:

    mytable.after("<tr>"
+"<td>&nbsp;</td>"
+"<td>"+obj.name+"</td>"
+"<td>"+obj.phone+"</td>"
+"</tr>");

    and it’s better to use .append() (it will add the objects in their list order):

    var mytable = $('.mytable');  // mytable selector is changed to select the table
                              // you can remove the empty <tr>
for(var i=0; i<items.length; i++){
   var obj = items[i];
   mytable.append("<tr>"
   +"<td>&nbsp;</td>"
   +"<td>"+obj.name+"</td>"
   +"<td>"+obj.phone+"</td>"
   +"</tr>");
    • 0