добавить элемент div рядом с таблицей с помощью jquery

0

У меня проблема, я новичок в jquery

У меня есть таблица, и я хочу добавить тег div рядом с таблицей

это мой код, который я пытаюсь:

Таблица:

<body>
<table id='menu_samping'>
    <tr>
        <td>Fashion</td>
    </tr>
    <tr>
        <td>Electronik</td>
    </tr>
    <tr>
        <td>Food</td>
    </tr>
    <tr>
        <td>Accessories</td>
    </tr>
    <tr>
        <td class="last">Health</td>
    </tr>
</table>
</body>

и этот мой код jquery и css:

    #menu_samping{
        width: 120px;
        border-spacing: 0px;

    }
    #menu_samping tr{
        height: 40px;
    }
    #menu_samping td{
        padding-left: 5px;
        background-color: #4b4b4b;
        border-bottom: groove #202020 2px;
        color : white;
    }
    #menu_samping td:hover{
        color : #d98d00;
        cursor: pointer;
    }
    #menu_samping td.last{
        border-bottom-left-radius: 4px
    }
    #testElem{
        border: 1px black solid;
        background: white;
        height: 500px;
        width: 200px;
        position: absolute;
    }
    #segitiga{
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 4px 5px 4px 0;
        border-color: transparent #6422ee transparent transparent;          }

$(function() {
    $( "#menu_samping td" ).mouseover(function() {
        generate_menu(this)
    });
});
function generate_menu(menu){
    $("#testElem, #segitiga").remove();
    $('#menu_samping').after($('<div id="segitiga"></div><div id="testElem">Option inside '+ $(menu).html()+'</div>'));
}

и это мой результат

Изображение 174551

результат, который я хочу, выглядит следующим образом:

Изображение 174551

и элемент будет удален после того, как мышь покинет таблицу и дополнительный элемент div.

Кто-нибудь может мне помочь?? мне действительно нужно это.. спасибо

  • 0
    как jsfiddle.net/arunpjohny/7R98p/2 ?
  • 0
    почти то же самое, расстояние между таблицей и делением все еще очень далеко, и положение треугольников не в опциях стола, что указатель мыши
Теги:

3 ответа

0
Лучший ответ

jsFiddle

CSS

.inline{
    float:left;
}  

#segitiga {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 12px 10px 0;
    border-color: transparent #fff transparent transparent;
    margin-left:-12px;
}

Добавлен класс для всех элементов и даже изменен css для элемента segitiga...

Только для справки, а не в вопросе

Я думаю, this - это то, что вы пытаетесь сделать.

Обновление 1 Check this Не идеальное решение, предложения будут высоко оценены.

Надеюсь, это то, что вы ищете... !!

Поделиться
  • 0
    спасибо за ответ ,, почти близко .. но элемент div и треугольники удаляются после того как я вышел из таблицы .. как сделать так, чтобы элемент div все еще был виден, если мышь находится над элементом div и элементом таблицы
  • 0
    @ Ханс проверить обновленный ответ ... Я бы предложил вам использовать этот аккуратный метод для решения, которое вы создаете ...
Показать ещё 3 комментария
0 
(function() {
 $("#menu_samping td").mouseover(function() {
        generate_menu($(this));
    });
    $("#menu_samping td").mouseout(function(){
        remove_div();
    });
});
function generate_menu(menu){
        $('#display_area').html('<div id="segitiga"></div><div id="testElem">Option inside '+ $(menu).html()+'</div>');
    }
    function remove_div(){
        $('#display_area').html('');
    }


<table id='menu_samping' style="float:left">
    <tr>
        <td>Fashion</td>
    </tr>
    <tr>
        <td>Electronik</td>
    </tr>
    <tr>
        <td>Food</td>
    </tr>
    <tr>
        <td>Accessories</td>
    </tr>
    <tr>
        <td class="last">Health</td>
    </tr>
</table>
<div id="display_area" style="float:left">

</div>

Стиль таблицы и div должен быть плавающим влево, чтобы отображаться рядом друг с другом. Параметр отображения таблицы является блоком по умолчанию, поэтому следующий элемент, который вы добавили, отображается под элементом таблицы. Чтобы этого избежать, можно использовать опцию float left.

Поделиться
0

http://jsfiddle.net/DC39g/1/в основном float:left; Это простое решение. Я пометил места, которые я изменил (только в css). Это может нарушить некоторое выравнивание вокруг него, в этом случае задницу.

вы также можете использовать абсолютное позиционирование. простым примером использования абсолютного в этом случае было бы:

<div style="position:relative">
    <table style='position:absolute'></table>
    <div style='position:absolute'></div>
</div>

но в этом случае вам нужно будет отобразить все элементы точно в соответствии с измерениями.

как и для третьего div (стрелка), я предлагаю вам вместо этого использовать CSS-стиль выбранных полей.

Во всяком случае, я закодировал стрелку для вас, и это обновление для вышеупомянутого jsfiddle http://jsfiddle.net/DC39g/2/ Изменить:

var margin=$(menu).position().top+$(menu).height()/2;
$('#menu_samping').after($('<div id="segitiga" style="margin-top:'+margin+'px"></div><div id="testElem">Option inside '+ $(menu).html()+'</div>'));

надеюсь, это поможет

Поделиться
  • 0
    спасибо за ответ, но <div id = "segitiga"> </ div> отсутствует, если диапазон
  • 0
    Это находится в диапазоне во второй скрипке JS. Я проигнорировал это в первый раз.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню