Databases
StackOverflow2013
Postsdbo
POHighlight table row background color with jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHighlight table row background color with jQuery
    text
    copied!<p>I'm using jQuery 1.7.2 and jQuery UI 1.8.21. I want to highlight a specific row in my table, but this doesn't seem to be working:</p> <pre><code>&lt;script language="javascript" type="text/javascript"&gt; $(document).ready(function() { $('#tr635').effect("highlight", {}, 3000); }); &lt;/script&gt; </code></pre> <p><code>#tr635</code> is the id of the tr I wish to highlight. What am I doing wrong? </p> <p>EDIT:</p> <p>HTML code for the table:</p> <pre><code>&lt;table width="100%"&gt; &lt;tr&gt; &lt;td colspan="8" class="title"&gt;Prioritize Liabilities&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="info"&gt;Note&lt;/td&gt; &lt;td class="info"&gt;Balance&lt;/td&gt; &lt;td class="info"&gt;Total Debt&lt;/td&gt; &lt;td class="info"&gt;Total Loss&lt;br /&gt;Given Default&lt;/td&gt; &lt;td class="info"&gt;% Loss&lt;br /&gt;Guarantee&lt;/td&gt; &lt;td class="info"&gt;Total Loss&lt;br /&gt;After Guarantee&lt;/td&gt; &lt;td class="info"&gt;% Loss&lt;/td&gt; &lt;td class="info"&gt;Note LGD&lt;/td&gt; &lt;/tr&gt; &lt;tr id="tr632"&gt; &lt;td&gt;&lt;em&gt;GGA 01&lt;/em&gt;&lt;/td&gt; &lt;td&gt;5,000&lt;/td&gt; &lt;td&gt;5,000&lt;/td&gt; &lt;td&gt;0&lt;/td&gt; &lt;td&gt;0%&lt;/td&gt; &lt;td&gt;0&lt;/td&gt; &lt;td&gt;0.00%&lt;/td&gt; &lt;td&gt;D&lt;/td&gt; &lt;/tr&gt; ...more rows... &lt;/table&gt; </code></pre> <p>EDIT 2: I found the answer. In my CSS for my table, I specified a background color for the td tags in the table. I removed this and set the background color in the tr tags instead. Now it works. It looks like the CSS for the td tag was overwriting jQuery.</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