Databases
StackOverflow2013
Postsdbo
POIn my case, How to highlight table row when mouseover?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIn my case, How to highlight table row when mouseover?
    text
    copied!<p>in my index.html page, I have an emtpy table defined as following:</p> <pre><code>&lt;body&gt; ... &lt;table width="500" border="0" cellpadding="1" cellspacing="0" class="mytable"&gt; &lt;tr&gt;&lt;/tr&gt; &lt;/table&gt; &lt;script src="my.js"&gt;&lt;/script&gt; &lt;/body&gt; </code></pre> <p>As you saw above, there is an javascript file <strong><em>my.js</em></strong> is included.</p> <p><em><strong>my.js</em></strong>(which is used to update the table row):</p> <pre><code>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&lt;items.length; i++){ var obj = items[i]; mytable.after("&lt;tr&gt;"); mytable.after("&lt;td&gt;&amp;nbsp;&lt;/td&gt;"); mytable.after(" &lt;td&gt;"+obj.name+"&lt;/td&gt;"); mytable.after("&lt;td&gt;"+obj.phone+"&lt;/td&gt;"); mytable.after("&lt;/tr&gt;"); } </code></pre> <p>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:</p> <pre><code>.mytable tr:hover { background-color: #632a2a; color: #fff; } </code></pre> <p>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?? </p> <p><strong>----EDIT----</strong></p> <p>Here is my index.html page:</p> <p><em><strong>index.html</em></strong></p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"&gt;&lt;/script&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt; &lt;title&gt;my test&lt;/title&gt; &lt;link href="mystyle.css" rel="stylesheet" type="text/css" media="screen" /&gt; &lt;/head&gt; &lt;body&gt; &lt;table width="500" border="0" cellpadding="1" cellspacing="0" class="mytable"&gt; &lt;tr&gt; &lt;/tr&gt; &lt;/table&gt; &lt;script src="my.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>--SOLUTION----</strong></p> <p>@manji 's solution solved my problem. That's change in JavaScript to use <code>append</code> instead of <code>after</code> inside for loop. Then, the CSS way of highlighting row is working.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload