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

的位置，我需要补充的是包含一个文本框的表单元格上方一些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