Ajouter div ci-dessus textbox sans changer de position de zone de texte

Question

Je dois ajouter un peu de contenu HTML (images, étiquettes, etc.) au-dessus d'une cellule de table qui contient une zone de texte. Il va y avoir au moins 10 lignes par page avec 8 colonnes dans chaque rangée. Les 8 colonnes contiennent une zone de texte.

Je l'ai déjà mis en place une jQuery qui montrera et cacher cette nouvelle zone de contenu au-dessus de la cellule du tableau, mais le CSS est pas correct et les boîtes d'entrée OBTIENNENT vers le bas ... La poussais zone de contenu que je fais référence à la DIV est 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 l'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 / facile côté client web-formes validations.html