Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is a working fiddle: <a href="http://jsfiddle.net/DEU7d/1/" rel="nofollow">http://jsfiddle.net/DEU7d/1/</a></p> <p>The class .alt is getting added to 'even' rows on page load. (i added a color for .alt)</p> <p>The class .over is getting toggled between mouse over and out .</p> <p>CSS</p> <pre><code>.over { background:#88aa4d; } .alt { color: #ff881a; } </code></pre> <p>JS</p> <pre><code>$(document).ready(function () { $(".stripeMe tr").mouseover(function () { $(this).addClass("over"); }).mouseout(function () { $(this).removeClass("over"); }); $(".stripeMe tr:even").addClass("alt"); }); </code></pre> <p>HTML</p> <pre><code>&lt;table class="stripeMe" width="100%"&gt; &lt;tr&gt; &lt;td style="width:85%"&gt;Product Name&lt;/td&gt; &lt;td style="width:5%; text-align:right"&gt;Price (each)&lt;/td&gt; &lt;td style="width:5%; text-align:center"&gt;Quantity&lt;/td&gt; &lt;td style="width:5%"&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr id="row-1"&gt; &lt;td&gt; linktext1 &lt;/td&gt; &lt;td style="text-align:right"&gt; price &lt;/td&gt; &lt;td&gt; &lt;input type="text" disabled="disabled" style="text-align:center; border-width:0; background-color:transparent" id="column-Quantity-1" value="12"&gt;&lt;/input&gt; &lt;/td&gt; &lt;td&gt; iink text2 &lt;/td&gt; &lt;/tr&gt; &lt;tr class="even" id="row-2"&gt; &lt;td&gt; linktext1 &lt;/td&gt; &lt;td style="text-align:right"&gt; price &lt;/td&gt; &lt;td&gt; &lt;input type="text" disabled="disabled" style="text-align:center; border-width:0; background-color:transparent" id="column-Quantity-2" value="21"&gt;&lt;/input&gt; &lt;/td&gt; &lt;td&gt; iink text2 &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;&lt;hr /&gt;Total&lt;/td&gt; &lt;td align="right"&gt; &lt;hr /&gt; &lt;span id="cart-total"&gt;total&lt;/span&gt; &lt;/td&gt; &lt;td align="center"&gt; &lt;hr /&gt; &lt;span id="cart-quantity"&gt;quantity&lt;/span&gt; &lt;/td&gt; &lt;td&gt;&lt;hr /&gt;&amp;nbsp;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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