Hinzufügen div über Textfeld, ohne Position des Textfelds zu ändern

Question

Ich muss HTML-Inhalt (Bilder, Beschriftungen usw.) oberhalb einer Tabellenzelle hinzufügen, die ein Textfeld enthält. Es wird mindestens 10 Zeilen pro Seite mit 8 Spalten in jeder Zeile geben. Alle 8 Spalten enthalten ein Textfeld.

Ich habe bereits einige jQuery zusammengestellt, die diesen neuen Inhaltsbereich über der Tabellenzelle anzeigen und ausblenden, aber das CSS ist nicht korrekt und die Eingabefelder werden nach unten geschoben ... Der Inhaltsbereich, der ich bin Bezug nehmend auf ist der DIV, der durch das jQuery-Plugin mit der Inputbanner-Klasse hinzugefügt wird.

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 Funktion

(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

sollten Sie in der Lage sein, eine Anpassung dieser Beispiel-Add-ons an Ihre Bedürfnisse anzupassen:

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