onmouseover 显示表中所有行的相同数据

Question

当鼠标悬停在从数据库返回的表中的图像上时，我无法使用 javascript 在鼠标悬停上显示表数据，现在我遇到的问题不是实际让 onmouseover 工作（上一个问题解决了这个问题），而是让数据显示在 mouseover 上鼠标悬停在每个图像上的变化。

查询的 IM 使用工作正常，并显示正确的数据，但在 onmouseover 上仅显示应仅显示表中第一行的数据，第二行和后续行应在查询调用时显示不同的数据（有效，只是不显示 onmouseover）

请记住此页面包含在我的 index.php 中，其中包含我所有的 .js 和 .css 调用

页面代码：

  <table border='0' cellpadding='0' cellspacing='0' class="center2">
  <tr>
  <td width='60'><img src="images/box_tl.png"></td>
  <td style="background: url(images/box_tm.png)" align="center"><img src="images/news.png"></td>
  <td width='25'><img src="images/box_tr.png"></td>
  </tr>
  <tr>
  <td style="background: url(images/box_ml.png)"><h2>.</h2></td>
  <td style="background: url(images/box_mm.png)">


 <?php
include 'connect.php';

$query = mysql_query("SELECT * FROM tbl_img") or die(mysql_error());;

echo "<table border='0' cellpadding='1' cellspacing='1' width'90%' id='1' class='tablesorter'><thead>";
echo "<tr> <th> </th> <th>Mob Name</th> <th>Id</th> <th>Health</th> <th>Body</th> <th>Effects</th> <th>Spawn</th></tr></thead><tbody>";
// keeps getting the next row until there are no more to get

while($row = mysql_fetch_array( $query )) {

 $mob_id = $row['mob_id'];
 $mob = $row['mob'];
 $body = $row['body'];
$mob_name = $row['mob_name'];
 $health = $row['health'];
 $level = $row['level'];

// Print out the contents of each row into a table
echo "<tr><td>";
echo "<img src='/testarea/include/mobs/$mob' />";
echo "</td><td>";
echo $mob_name;
echo "</td><td>";
echo $level;
echo "</td><td>";
echo $health;
echo "</td><td>";





echo "
<a onmouseover='ShowPop()' href=''><img src='/testarea/include/mobs/dead/$body' /></a>
";

echo "

<div id='hidden-table' style='display:none;'>
<table border='0' cellpadding='0' cellspacing='0' class='center3'>
  <tr>
  <td width='14'><img src='images/info_tl.png'></td>
  <td style='background: url(images/info_tm.png)' align='center'></td>
  <td width='14'><img src='images/info_tr.png'></td>
  </tr>
  <tr>
  <td style='background: url(images/info_ml.png)'><h2>.</h2></td>
  <td style='background: url(images/info_mm.png)'>
";




$query2 = mysql_query("SELECT * FROM tbl_drop WHERE mob_name='$mob_name'") or die(mysql_error());

echo "<table border='0' cellpadding='1' cellspacing='1' width='250' id='2' class='tablesorter'><thead>";
 echo "<tr> <th> </th> <th>Item Name</th> <th>Qty</th></thead><tbody>";
// keeps getting the next row until there are no more to get

while($row = mysql_fetch_array( $query2 )) {

$id = $row['id'];
$item_img = $row['item_img'];
$qty = $row['qty'];
$item_name = $row['item_name'];


// Print out the contents of each row into a table
echo "<tr><td width='50'>";
echo "<img src='/testarea/item/$item_img' />";
echo "</td><td width='150'>";
echo $item_name;
echo "</td><td width='50'>";
echo $qty;
echo "</td></tr>";
}

echo "</tbody></table>";


echo "
  </td>
  <td style='background: url(images/info_mr.png)'><h2>.</h2></td>
  </tr>
  <tr>
  <td width='14'><img src='images/info_bl.png'></td>
  <td style='background: url(images/info_bm.png)' align='center'><h2>.</h2></td>
  <td width='14'><img src='images/info_br.png'></td>
  </tr>
  </table>
</div>"




;
echo "</td><td>";
echo "test";
echo "</td><td>";
echo "test";
echo "</td></tr>";
}

echo "</tbody></table>";

?>




  </td>
  <td style="background: url(images/box_mr.png)"><h2>.</h2></td>
  </tr>
  <tr>
  <td width='60'><img src="images/box_bl.png"></td>
  <td style="background: url(images/box_bm.png)" align="center"><h2>.</h2></td>
  <td width='25'><img src="images/box_br.png"></td>
  </tr>
  </table>

</html>

popup.js代码：

// create the popup box - remember to give it some width in your styling
document.write('<div id="pup" style="position:abolute; display:none; z-index:200;"></div>');

var minMargin = 15; // set how much minimal space there should be (in pixels)
                // between the popup and everything else (borders, mouse)
var ready = false;  // we are ready when the mouse event is set up
var default_width = 200; // will be set to width from css in document.ready
function ShowPop()
{
popup($('#hidden-table').html(), 400);
}
/* Prepare popup and define the mouseover callback */
jQuery(document).ready(function(){
$('#pup').hide();
css_width = $('#pup').width();
if (css_width != 0) default_width = css_width;
// set dynamic coords when the mouse moves
$(document).mousemove(function(e){ 
    var x,y;

    x = $(document).scrollLeft() + e.clientX;
    y = $(document).scrollTop() + e.clientY;

    x += 10; // important: if the popup is where the mouse is, the hoverOver/hoverOut events flicker

    var x_y = nudge(x,y); // avoids edge overflow

    // remember: the popup is still hidden
    $('#pup').css('top', x_y[1] + 'px');
    $('#pup').css('left', x_y[0] + 'px');
});
ready = true;
});

/*
The actual callback:
Write message, show popup w/ custom width if necessary,
make sure it disappears on mouseout
*/
function popup(msg, width)
{
if (ready) {
    // use default width if not customized here
    if (typeof width === "undefined"){
        width = default_width;
    }
    // write content and display
    $('#pup').html(msg).width(width).show();
    // make sure popup goes away on mouse out
    // the event obj needs to be gotten from the virtual 
    //   caller, since we use onmouseover='popup(msg)' 
    var t = getTarget(arguments.callee.caller.arguments[0]);
    $(t).unbind('mouseout').bind('mouseout', 
        function(e){
            $('#pup').hide().width(default_width);
        }
    );
}
}

/* Avoid edge overflow */
function nudge(x,y)
{
var win = $(window);

// When the mouse is too far on the right, put window to the left
var xtreme = $(document).scrollLeft() + win.width() - $('#pup').width() - minMargin;
if(x > xtreme) {
    x -= $('#pup').width() + 2 * minMargin;
}
x = max(x, 0);

// When the mouse is too far down, move window up
if((y + $('#pup').height()) > (win.height() +  $(document).scrollTop())) {
    y -= $('#pup').height() + minMargin;
}

return [ x, y ];
}

/* custom max */
function max(a,b){
if (a>b) return a;
else return b;
}

/*
Get the target (element) of an event.
Inspired by quirksmode
*/
function getTarget(e) {
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
    targ = targ.parentNode;
return targ;
}

Answer 1

所有隐藏表都具有相同的 ID，但 ID 必须是唯一的。

提供链接作为 ShowPop() 的参数，

<a onmouseover='ShowPop(this)' ....>

然后您将能够访问 ShowPop() 内的预期目标：

function ShowPop(o)
{
popup($(o).next('div').html(), 400);
}

---

编辑：

关于评论：
目前我认为弹出窗口不会在任何浏览器（IE 除外）中消失 onmouseout，因为您没有向 ShowPop() 提供参数，在其他浏览器中需要从 getTarget 返回任何内容，因为它们不知道 window.事件。

将此行：更改

var t = getTarget(arguments.callee.caller.arguments[0]);

为

var t = arguments.callee.caller.arguments[0];

...因为当您接受我的建议时，链接已作为 ShowPup() 的参数提供，因此无需调用 getTarget() 。