0

我正在创建一个基于 AJAX 的详细信息系统，其中详细信息在onmouseover事件中可见，为此我创建了以下 HTML 以显示

    <html>
        <head>
            <Script src="scripts/ajaxfunctions.js"></Script>
        </head>
        <body>
          <table widht="1000">
        <tbody>
            <tr>
                <td width="500">
                    <img src="Images/0.jpg" width="100" height="100" onmouseover="func(0)" onmouseout="clear()" />
                </td>
                <td rowspan="8" width="500">
                    <div id="myDiv" ></div>
                </td>
            <tr>
                <td width="500">
                    <img src="Images/1.jpg" width="100" height="100" onmouseover="func(1)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/2.jpg" width="100" height="100" onmouseover="func(2)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/3.jpg" width="100" height="100" onmouseover="func(3)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/4.jpg" width="100" height="100" onmouseover="func(4)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/5.jpg" width="100" height="100" onmouseover="func(5)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/6.jpg" width="100" height="100" onmouseover="func(6)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/7.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/8.jpg" width="100" height="100" onmouseover="func(8)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/9.jpg" width="100" height="100" onmouseover="func(9)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/10.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr><tr>
                <td width="500">
                    <img src="Images/11.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/12.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/13.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/14.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/15.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/16.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr><tr>
                <td width="500">
                    <img src="Images/17.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/18.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/19.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr><tr>
                <td width="500">
                    <img src="Images/20.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr><tr>
                <td width="500">
                    <img src="Images/21.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr><tr>
                <td width="500">
                    <img src="Images/22.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr><tr>
                <td width="500">
                    <img src="Images/23.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr><tr>
                <td width="500">
                    <img src="Images/24.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/24.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/25.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr>
            <tr>
                <td width="500">
                    <img src="Images/26.jpg" width="100" height="100" onmouseover="func(7)" onmouseout="clear()" />
                </td>
            </tr>
        </tbody>
        </table>
     </body>
</html>

在这里，详细信息将显示在 div 标签中....但是当左侧的条目展开时，DIV 标签中的内容不可见...向上滚动以查看详细信息...有什么办法可以修复右侧的 div 进入屏幕？

Javascript代码在这里

    function func(num)
        {
            var xmlhttp;
            var txt,x,xx,i;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {       // code for IE6, IE5
                xmlhttp=new ActiveXObject("MSXML2.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    txt="";
                    try
                    {
                        var xmlDoc=xmlhttp.responseXML;
                        txt="";
                        var a = 0;
                        x=xmlDoc.getElementsByTagName("Person");
                        var xx= x[num].getElementsByTagName("Name");
                        txt += "Name : " + xx[0].firstChild.nodeValue+ "<br>" ;
                        xx = x[num].getElementsByTagName("RegistrationNO");
                        txt += "RegistrationNo : " + xx[0].firstChild.nodeValue+ "<br>" ;
                        xx = x[num].getElementsByTagName("Address");
                        txt += "Address : " + xx[0].firstChild.nodeValue+ "<br>" ;
                        xx= x[num].getElementsByTagName("ContactNo");
                        txt += "Contact No : " + xx[0].firstChild.nodeValue+ "<br>";
                        document.getElementById("myDiv").innerHTML=txt;
                    }
                    catch (er)
                    {
                        document.getElementById('myDiv').innerHTML=er+" 1";
                    }

                }
            }   
            try
            {
            xmlhttp.open("GET","http://localhost/StudentDetails/Data/database.xml",true);
            xmlhttp.send();
            }
            catch (er)
            {
                document.getElementById('myDiv').innerHTML=er+" 2";
            }
        }
4

1 回答 1

1

基本答案是您可以position: fixed在 CSS 中使用将 div 放置在您想要的位置，并在页面的其余部分滚动时让它不动。

如果这对您不起作用，您可以使用 javascript 将 div 定位在触发 mouseover 事件的图像附近，以便它在视图中。

我用 jQuery 做了一个演示，这一切都可以用直接的 javascript 来完成，我喜欢 jQuery 的紧凑外观

位置：固定
位置：绝对- 捕捉到图像
位置：绝对- 捕捉到屏幕

我还为演示更改了其他一些内容：

我通常尽量避免使用表格，我发现 div 在大多数情况下更容易使用。我建议使用 3 个 div，一个 div 用于保存图片，一个 div 用于显示数据，一个外部 div 用于包含和对齐另外两个：

<div id="outer">
    <div id='pictures'></div>
    <div id="myDiv"></div>
</div>

如果您的图像名称确实像您的示例一样可预测，则可以动态生成所有图像标签：

$(function () {
    for (i = 0; i < 27; i++) {
        $("div#pictures").append("<img id='" + i + "' class='studentimg' src='Images/" + i + ".jpg' />");
        $(".studentimg").on('mouseover', function (e) {func(this);}).on('mouseout', clear);
    }
});

然后将其与一些 CSS 结合起来：

div#outer {
    position: relative;
}
div#myDiv {
    position: absolute;
    width: 500px;
    left: 135px;
}
div#pictures {
    float: left;
    width: 120px;
}
img.studentimg {
    width: 100px;
    height: 100px;
}

我还注意到，每次将鼠标悬停在任何一张图像上时，您都会重新加载所有人的数据。我认为在页面加载时加载列表并预先构建文本可能更有效。

重用你的代码（也可以用 jQuery 压缩），定义和填充一个数组：

var peopleList = Array();

function fetchXML() {
    var xmlhttp;
    var txt, x, xx, i;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("MSXML2.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            txt = "";
            try {
                var xmlDoc = xmlhttp.responseXML;
                x = xmlDoc.getElementsByTagName("Person");
                for (i = 0; i < x.length; i++) {
                    txt = "";
                    var xx = x[i].getElementsByTagName("Name");
                    txt += "Name : " + xx[0].firstChild.nodeValue + "<br>";
                    xx = x[num].getElementsByTagName("RegistrationNO");
                    txt += "RegistrationNo : " + xx[0].firstChild.nodeValue + "<br>";
                    xx = x[num].getElementsByTagName("Address");
                    txt += "Address : " + xx[0].firstChild.nodeValue + "<br>";
                    xx = x[num].getElementsByTagName("ContactNo");
                    txt += "Address : " + xx[0].firstChild.nodeValue + "<br>";
                    peopleList[i] = txt;
                }
            } catch (er) {
                peopleList[i] = er + " 1";
            }
        }
    }
    try {
        xmlhttp.open("GET", "http://localhost/StudentDetails/Data/database.xml", true);
        xmlhttp.send();
    } catch (er) {
        peopleList = null;
        document.getElementById('myDiv').innerHTML = er + " 2";
    }
}

所以在鼠标悬停时，您所要做的就是显示文本：

function func(el) {
    $("#myDiv").html(peopleList[el.id]);
}
于 2013-07-06T17:15:59.083 回答