Home/ Questions/Q 1107121
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T01:53:37+00:00

I want to show dynamic div for each dynamic td. consider <tr><td><a id=1>abc</a></td></tr> <tr><td><a

  • 0

I want to show dynamic div for each dynamic td.

consider

<tr><td><a id=1>abc</a></td></tr>
<tr><td><a id=1>cde</a></td></tr>
<tr><td><a id=1>fgh</a></td></tr>
<tr><td><a id=1>hij</a></td></tr>
<tr><td><a id=1>klm</a></td></tr>

these tds wil be generated based on data from db.
i want to show a div on mouse over of tag.
The main thing , how can i position the div for each near that td

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could use jQuery .hover()

    And the jQueryUI position utility to put the divs where you want them.

    Below is an example. You can do this many different ways. I think the important thing is it appears the position() method doesn’t work until the element is visible. At least that’s what I experienced.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<style type="text/css">
    * {font-family:Calibri}
    .data {width:100px;border:1px solid #000;display:none}
    .cell {width:200px;border:1px solid #ddd}
</style>
<script type="text/javascript">
    $(function () {
        $(".cell").hover(
            function () {
                var $td = $(this);
                var divId = '#div-' + this.id.split('-')[1];
                //show it first or it doesn't position right
                $(divId).show();                
                $(divId).position({
                    my: 'left center',
                    at: 'right center',
                    of: $td,
                    collision: 'none'
                });
            },
            function () {
                var divId = '#div-' + this.id.split('-')[1];
                $(divId).hide();
            }
        );
    });
    </script>
</head>
<body>
    <table width="200" cellspacing="3" cellpadding="2">
        <tr><td id="td-1" class="cell">Data</td></tr>
        <tr><td id="td-2" class="cell">Data</td></tr>
        <tr><td id="td-3" class="cell">Data</td></tr>
        <tr><td id="td-4" class="cell">Data</td></tr>
        <tr><td id="td-5" class="cell">Data</td></tr>
        <tr><td id="td-6" class="cell">Data</td></tr>
    </table>
    <div id="div-1" class="data">div-1</div>
    <div id="div-2" class="data">div-2</div>
    <div id="div-3" class="data">div-3</div>
    <div id="div-4" class="data">div-4</div>
    <div id="div-5" class="data">div-5</div>
    <div id="div-6" class="data">div-6</div> 
</body>
</html>
    • 0