Databases
StackOverflow2013
Postsdbo
POjQuery Show TD one at a time on focus
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Show TD one at a time on focus
    text
    copied!<p>I have a registration form for my websites and I am trying to show different hidden td's as tips to my users when they focus on the inputs...</p> <p>I've tried the closest(), next(), sibling(), hasClass() and cannot get this thing to work...any help is appreciated. Here is the jsfiddle <a href="http://jsfiddle.net/88JPU/1/" rel="nofollow">http://jsfiddle.net/88JPU/1/</a></p> <pre><code>&lt;style type="text/css" rel="stylesheet"&gt; .focusField{ border:solid 2px #333; background:lightyellow; } .idleField{ background:#fff; border: solid 1px #DFDFDF; } input.text_field { -moz-border-radius: 5px 5px 5px 5px; border: 1px solid #DDDDDD; font-size: 14px; margin: 0; padding: 8px; width: 200px; } input.text_field.with_box { -moz-border-radius-bottomright: 0; -moz-border-radius-topright: 0; } .col-help { background:#f7f7f7; border:1px solid #ccc; font-size:13px; font-family:Tahoma, Geneva, sans-serif } &lt;/style&gt; &lt;script&gt; $(function() { $('.col-help').hide(); $('input[type="text"]').focus(function () { $(this).removeClass("idleField").addClass("focusField"); $(this).closest('td').hasClass('col-help').show(); }); }); &lt;/script&gt; &lt;table&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Full Name:&lt;/td&gt; &lt;td&gt;&lt;input type="text" class="text_field name" id="name"/&gt;&lt;/td&gt; &lt;td class="col-help name" width="200 &gt;what is your name&lt;/td&gt; &lt;tr&gt; &lt;td&gt;Password:&lt;/td&gt;&lt;td&gt;&lt;input type="text" class="text_field" id="password"/&gt;&lt;/td&gt; &lt;td class="col-help"&gt;Type a strong password...&lt;/td&gt; &lt;/tr&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre>
 

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