上方添加文本框格，而不改變文本框

的位置，我需要補充的是包含一個文本框的表單元格上方一些HTML內容（圖片，標籤等）。這裏將是每頁至少10行，每行8列。所有8列包含一個文本框。上方添加文本框格，而不改變文本框

我已經把一些jQuery的，將顯示和隱藏表格單元格高於這一新的內容區域，但CSS是不正確的輸入框越來越被推了下來...我是在內容區參考是由jQuery插件與inputbanner類所添加的DIV。

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函數

(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);

來源

2009-07-20 RSolberg