在動態td上顯示鼠標的div div

考慮

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

時便會產生這些TDS基於從DB數據。我想顯示標籤上的鼠標的div。主要的事情，我怎麼能定位DIV爲每個TD

來源

2010-09-23 zod

你可以使用jQuery .hover()

而且jQueryUI position utility把你想讓他們的div。

下面是一個例子。你可以用許多不同的方法做到這一點我認爲重要的是，直到元素可見時，position（）方法纔會起作用。至少那是我所經歷的。

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

來源

2010-09-23 20:45:17 fehays

此代碼，雖然在概念上是正確的，是可怕的ineff icient，並可以肯定地做一些清理。 – 2010-09-23 23:19:43

@Yi，我不會把它稱爲可怕的例子。更何況我沒有關於海報的標記和數據真實的細節。這個想法是展示一個位置特性的例子，而不是爲它們編碼。該代碼工作正常 – fehays 2010-09-23 23:44:49

。 – zod 2010-09-26 23:56:54

附近如果你做的TD position:relative您可以position:absolute添加一個隱藏的股利將出現在懸停每個TD。

td { position:relative; } 
.hidden_div { position:absolute; left:-9999em; } 
td:hover .hidden_div { left:auto; top: 100%; } /*adjust top*/

這將需要ie6的黑客，但如果你想支持。

來源

2010-09-23 20:06:36 Galen

CSS：

table td div { display:none; } 
table tr:hover td div { display:block; }

HTML

<table> 
    <tr><td><a id=1>abc</a><div>div1</div></td></tr> 
    <tr><td><a id=1>cde</a><div>div2</div></td></tr> 
    <tr><td><a id=1>fgh</a><div>div3</div></td></tr> 
    <tr><td><a id=1>hij</a><div>div4</div></td></tr> 
    <tr><td><a id=1>klm</a><div>div5</div></td></tr> 
</table>

你可以改變display:block到display:inline

來源

2010-09-23 23:08:09

在動態td上顯示鼠標的div div

回答

相關問題