Javascript 在文本框上方添加div，而不更改文本框的位置

我需要在包含文本框的表格单元格上方添加一些HTML内容（图像、标签等）。每页至少有10行，每行8列。所有8列都包含一个文本框

我已经整理了一些jQuery，它们将显示和隐藏表格单元格上方的新内容区域，但是CSS不正确，输入框被向下推。。。我所指的内容区域是jQuery插件使用inputbanner类添加的DIV

CSS

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

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

HTML

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

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

SWR:1123我最大的项目
$（）.ready（函数（））{
$（'.timebox'）.inputmenu（）；
});

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

（函数（$）{
$.fn.inputmenu=函数（）{
函数createInputMenu（节点）{
$（节点）.bind（'focus'，function（）{
$（this.parent（）.toggleClass（'highlight'）；
$（this.prev（'div.inputbanner'）.toggle（）；
});
$（节点）.bind（'blur'，function（）{
$（this.parent（）.toggleClass（'highlight'）；
$（this.prev（'div.inputbanner'）.toggle（）；
});
$（节点）.parent（）.prepend（'nbsp'）；
}
返回此值。每个（函数（）{
createInputMenu（此菜单）；
});
}
})（jQuery）；