텍스트 상자의 위치를 ​​변경하지 않고 텍스트 상자 위의 DIV를 추가하십시오

StackOverflow https://stackoverflow.com/questions/1155257

문제

텍스트 상자가 포함 된 테이블 셀 위에 HTML 컨텐츠 (이미지, 레이블 등)를 추가해야합니다. 각 행에 8 개의 열이있는 페이지 당 최소 10 개의 행이있을 것입니다. 8 개의 열에는 텍스트 상자가 모두 포함되어 있습니다.

나는 이미이 새로운 컨텐츠 영역을 테이블 셀 위에 표시하고 숨길 수있는 jQuery를 모았지만 CSS는 정확하지 않으며 입력 상자가 밀려납니다 ... 내가 참조하는 컨텐츠 영역은 inputbanner 클래스와 함께 jQuery 플러그인에 의해 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);
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top