Ajouter un élément au-dessus de la zone de texte sans modifier la position de la zone de texte

Question

Je dois ajouter du contenu HTML (images, étiquettes, etc.) au-dessus d'une cellule de tableau contenant une zone de texte. Il y aura au moins 10 lignes par page avec 8 colonnes dans chaque rangée. Les 8 colonnes contiennent une zone de texte.

J'ai déjà assemblé quelques jQuery qui montreront et cacheront cette nouvelle zone de contenu au-dessus de la cellule du tableau, mais le CSS n'est pas correct et les boîtes de saisie sont poussées vers le bas ... La zone de contenu que je suis se référant à est le DIV étant ajouté par le plugin jQuery avec la classe inputbanner.

CSS

.inputbanner 
{ 
    background-color: Orange; 
    position: absolute; 
    top: -20px; 
    display: none; 
} 

HTML

<tr> 
    <td class="itemdescr"> 
     SWR: 1123 My Biggest Project 
    </td> 
    <td> 
     <input type="text" maxlength="2" class="timebox" /> 
    </td> 
    <td> 
     <input type="text" maxlength="2" class="timebox"/> 
    </td> 
    <td> 
     <input type="text" maxlength="2" class="timebox"/> 
    </td> 
    <td> 
     <input type="text" maxlength="2" class="timebox"/> 
    </td> 
    <td> 
     <input type="text" maxlength="2" class="timebox"/> 
    </td> 
    <td> 
     <input type="text" maxlength="2" class="timebox"/> 
    </td> 
    <td> 
     <input type="text" maxlength="2" class="timebox"/> 
    </td> 
</tr> 
<script language="javascript"> 
    $().ready(function() { 
     $('.timebox').inputmenu(); 
    }); 
</script> 

jQuery Fonction

(function($) { 
    $.fn.inputmenu = function() { 
     function createInputMenu(node) { 
      $(node).bind('focus', function() { 
       $(this).parent().toggleClass('highlight'); 
       $(this).prev('div.inputbanner').toggle(); 
      }); 
      $(node).bind('blur', function() { 
       $(this).parent().toggleClass('highlight'); 
       $(this).prev('div.inputbanner').toggle(); 
      }); 
      $(node).parent().prepend('<div class="inputbanner"><img src="../../Content/Images/arrow_left_active.gif" />&nbsp<img src="../../Content/Images/arrow_left_inactive.gif" /></div>'); 
     } 
     return this.each(function() { 
      createInputMenu(this); 
     }); 
    } 
})(jQuery); 

Answer 1

Vous devriez être en mesure d'adapter un de ces exemples add-ons pour répondre à vos besoins:

http://nicolae.namolovan.googlepages.com/jquery.inputHintBox.html

http://www.jankoatwarpspeed.com/post/2008/06/09/Building-a-better-web-forms-Context-highlighting-using-jQuery.aspx

http://letmehaveblog.blogspot.com/2007/08/easy-client-side-web-forms-validations.html