点击Click显示隐藏层,在“移动栏”的位置点击,提示错误。

解决方案 »

  1.   

    应该是这句的问题:tempx=parseInt(crossobj.style.left);  
      

  2.   

    把你的js脚本拿到html加载的最后就可以了  页面没加载你就取控件就取不到了
      

  3.   

    <style> 
    #data { 
    position: absolute; width ="500" height="300" padding : 5px; 
    z-index: 100; 
    cursor: hand; 

    </style> 
    把上边这一串里的样式改到<div id="data" style="left:50;top:50;display:none"> 一起
    就对了,样式遭重叠了,取crossobj.style.left的时候找不到left
      

  4.   

    改后还是提示错误
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>放大镜</title>
    </head>
    <body><script language="JavaScript">
       
    crossobj=document.getElementById("data");
    document.onmousedown=initializedrag;
    document.onmouseup=new Function("dragapproved=false");

    function initializedrag(){
    if(event.srcElement.id=="data"){
    offsetx=event.clientX;
    offsety=event.clientY;
    tempx=parseInt(crossobj.style.left);  
    tempy=parseInt(crossobj.style.top);
    dragapproved=true;
    document.onmousemove=drag_drop;
    }
    }
       
    function drag_drop(){
    if(dragapproved){
    crossobj.style.left=tempx+event.clientX-offsetx;
    crossobj.style.top=tempy+event.clientY-offsety;
    return false;
    }   
    }
          
    function show()
    {
    document.getElementById("main").style.display="none";
    document.getElementById("main").style.visibility="hidden";
    document.getElementById("data").style.display="block";
    document.getElementById("data").style.visibility="visible";
    }

    function hide()
    {
    document.getElementById("main").style.display="block";
    document.getElementById("data").style.visibility="hidden";
    } function goNextPage()
    {
    myTable1.nextPage();
    }

    function goPrePage()
    {
    myTable1.previousPage();
    }

    function goFirstPage()
    {
    myTable1.firstPage();
    }

    function goLastPage()
    {
    myTable1.lastPage();
    }</script><div id="main" style="visiblity: visible">
    <input type="text" value="" /> 
    <input type="button" value="click" onclick="show()" />
    </div><div id="data" style="position:absolute;padding:5px;z-index:100;cursor:hand;left:50px;top:50px;display:none">
    移动栏
    <OBJECT
    ID="myData1" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
    BORDER="0" WIDTH="0" HEIGHT="0">
    <PARAM NAME="DataURL" value="data2.txt">
    <PARAM NAME="UseHeader" VALUE="True">
    </OBJECT>
    <table id="outer_table" border=3 bordercolor="yellow">
    <tr>
    <td>
    <table border=2 id="myTable1" DATASRC=#myData1 DATAPAGESIZE="10"
    bordercolor="blue">
    <thead>
    <tr>
    <td>公司名称</td>
    <td>联系人姓名</td>
    </tr>
    </thead>
    <tbody>
    <tr height=25px valign="middle">
    <td width="70">
    <input id="input" type="radio" name="radio" />
    </td>
    <td width="110">
    <div DATAFLD="公司名称">
    </td>
    <td width="70">
    <div DATAFLD="联系人姓名">
    </td>
    </tr>
    </tbody>
    </table>

    <table align="center" border=2>
    <tr>
    <td align="center">
    <input id="first" type="button" value=" 第一页 " onclick="goFirstPage()"> 
    <input id="next" type="button" value=" 下一页 " onclick="goNextPage()"> 
    <input id="previous" type="button" value=" 上一页 " onclick="goPrePage()">
    <input id="last" type="button" value=" 最后一页 " onclick="goLastPage()">
    </td>
    </tr>
    <tr>
    <td align="center">
    <input type="button" value=" 确认 " onclick="hide()" /> 
    <input type="button" value=" 取消 " onclick="hide()" />
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>  
    </div>
    </body>
    </html><html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>放大镜</title>
    </head>
    <body><script language="JavaScript">
    /*var list = {};
    var input=document.getElementsById('input');
    input.onclick = function(){
    if(this.checked && list[this.value]){
         delete list[this.value];
         return; 
       }
       list[this.value] = [this.cells[1].innerHTML, this.cells[2].innerHTML];
    }*/
       
    crossobj=document.getElementById("data");
    document.onmousedown=initializedrag;
    document.onmouseup=new Function("dragapproved=false");

    function initializedrag(){
    if(event.srcElement.id=="data"){
    offsetx=event.clientX;
    offsety=event.clientY;
    tempx=parseInt(crossobj.style.left);  
    tempy=parseInt(crossobj.style.top);
    dragapproved=true;
    document.onmousemove=drag_drop;
    }
    }
       
    function drag_drop(){
    if(dragapproved){
    crossobj.style.left=tempx+event.clientX-offsetx;
    crossobj.style.top=tempy+event.clientY-offsety;
    return false;
    }   
    }
          
    function show()
    {
    document.getElementById("main").style.display="none";
    document.getElementById("main").style.visibility="hidden";
    document.getElementById("data").style.display="block";
    document.getElementById("data").style.visibility="visible";
    }

    function hide()
    {
    document.getElementById("main").style.display="block";
    document.getElementById("data").style.visibility="hidden";
    } function goNextPage()
    {
    myTable1.nextPage();
    }

    function goPrePage()
    {
    myTable1.previousPage();
    }

    function goFirstPage()
    {
    myTable1.firstPage();
    }

    function goLastPage()
    {
    myTable1.lastPage();
    }</script><div id="main" style="visiblity: visible">
    <input type="text" value="" /> 
    <input type="button" value="click" onclick="show()" />
    </div><div id="data" style="position:absolute;padding:5px;z-index:100;cursor:hand;left:50px;top:50px;display:none">
    移动栏
    <OBJECT
    ID="myData1" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
    BORDER="0" WIDTH="0" HEIGHT="0">
    <PARAM NAME="DataURL" value="data2.txt">
    <PARAM NAME="UseHeader" VALUE="True">
    </OBJECT>
    <table id="outer_table" border=3 bordercolor="yellow">
    <tr>
    <td>
    <table border=2 id="myTable1" DATASRC=#myData1 DATAPAGESIZE="10"
    bordercolor="blue">
    <thead>
    <tr>
    <td>公司名称</td>
    <td>联系人姓名</td>
    </tr>
    </thead>
    <tbody>
    <tr height=25px valign="middle">
    <td width="70">
    <input id="input" type="radio" name="radio" />
    </td>
    <td width="110">
    <div DATAFLD="公司名称">
    </td>
    <td width="70">
    <div DATAFLD="联系人姓名">
    </td>
    </tr>
    </tbody>
    </table>

    <table align="center" border=2>
    <tr>
    <td align="center">
    <input id="first" type="button" value=" 第一页 " onclick="goFirstPage()"> 
    <input id="next" type="button" value=" 下一页 " onclick="goNextPage()"> 
    <input id="previous" type="button" value=" 上一页 " onclick="goPrePage()">
    <input id="last" type="button" value=" 最后一页 " onclick="goLastPage()">
    </td>
    </tr>
    <tr>
    <td align="center">
    <input type="button" value=" 确认 " onclick="hide()" /> 
    <input type="button" value=" 取消 " onclick="hide()" />
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>  
    </div>
    </body>
    </html>
      

  5.   

    改后还是提示错误
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>放大镜</title>
    </head>
    <body><script language="JavaScript">
       
    crossobj=document.getElementById("data");
    document.onmousedown=initializedrag;
    document.onmouseup=new Function("dragapproved=false");

    function initializedrag(){
    if(event.srcElement.id=="data"){
    offsetx=event.clientX;
    offsety=event.clientY;
    tempx=parseInt(crossobj.style.left);  
    tempy=parseInt(crossobj.style.top);
    dragapproved=true;
    document.onmousemove=drag_drop;
    }
    }
       
    function drag_drop(){
    if(dragapproved){
    crossobj.style.left=tempx+event.clientX-offsetx;
    crossobj.style.top=tempy+event.clientY-offsety;
    return false;
    }   
    }
          
    function show()
    {
    document.getElementById("main").style.display="none";
    document.getElementById("main").style.visibility="hidden";
    document.getElementById("data").style.display="block";
    document.getElementById("data").style.visibility="visible";
    }

    function hide()
    {
    document.getElementById("main").style.display="block";
    document.getElementById("data").style.visibility="hidden";
    } function goNextPage()
    {
    myTable1.nextPage();
    }

    function goPrePage()
    {
    myTable1.previousPage();
    }

    function goFirstPage()
    {
    myTable1.firstPage();
    }

    function goLastPage()
    {
    myTable1.lastPage();
    }</script><div id="main" style="visiblity: visible">
    <input type="text" value="" /> 
    <input type="button" value="click" onclick="show()" />
    </div><div id="data" style="position:absolute;padding:5px;z-index:100;cursor:hand;left:50px;top:50px;display:none">
    移动栏
    <OBJECT
    ID="myData1" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
    BORDER="0" WIDTH="0" HEIGHT="0">
    <PARAM NAME="DataURL" value="data2.txt">
    <PARAM NAME="UseHeader" VALUE="True">
    </OBJECT>
    <table id="outer_table" border=3 bordercolor="yellow">
    <tr>
    <td>
    <table border=2 id="myTable1" DATASRC=#myData1 DATAPAGESIZE="10"
    bordercolor="blue">
    <thead>
    <tr>
    <td>公司名称</td>
    <td>联系人姓名</td>
    </tr>
    </thead>
    <tbody>
    <tr height=25px valign="middle">
    <td width="70">
    <input id="input" type="radio" name="radio" />
    </td>
    <td width="110">
    <div DATAFLD="公司名称">
    </td>
    <td width="70">
    <div DATAFLD="联系人姓名">
    </td>
    </tr>
    </tbody>
    </table>

    <table align="center" border=2>
    <tr>
    <td align="center">
    <input id="first" type="button" value=" 第一页 " onclick="goFirstPage()"> 
    <input id="next" type="button" value=" 下一页 " onclick="goNextPage()"> 
    <input id="previous" type="button" value=" 上一页 " onclick="goPrePage()">
    <input id="last" type="button" value=" 最后一页 " onclick="goLastPage()">
    </td>
    </tr>
    <tr>
    <td align="center">
    <input type="button" value=" 确认 " onclick="hide()" /> 
    <input type="button" value=" 取消 " onclick="hide()" />
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>  
    </div>
    </body>
    </html><html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>放大镜</title>
    </head>
    <body><script language="JavaScript">
    /*var list = {};
    var input=document.getElementsById('input');
    input.onclick = function(){
    if(this.checked && list[this.value]){
         delete list[this.value];
         return; 
       }
       list[this.value] = [this.cells[1].innerHTML, this.cells[2].innerHTML];
    }*/
       
    crossobj=document.getElementById("data");
    document.onmousedown=initializedrag;
    document.onmouseup=new Function("dragapproved=false");

    function initializedrag(){
    if(event.srcElement.id=="data"){
    offsetx=event.clientX;
    offsety=event.clientY;
    tempx=parseInt(crossobj.style.left);  
    tempy=parseInt(crossobj.style.top);
    dragapproved=true;
    document.onmousemove=drag_drop;
    }
    }
       
    function drag_drop(){
    if(dragapproved){
    crossobj.style.left=tempx+event.clientX-offsetx;
    crossobj.style.top=tempy+event.clientY-offsety;
    return false;
    }   
    }
          
    function show()
    {
    document.getElementById("main").style.display="none";
    document.getElementById("main").style.visibility="hidden";
    document.getElementById("data").style.display="block";
    document.getElementById("data").style.visibility="visible";
    }

    function hide()
    {
    document.getElementById("main").style.display="block";
    document.getElementById("data").style.visibility="hidden";
    } function goNextPage()
    {
    myTable1.nextPage();
    }

    function goPrePage()
    {
    myTable1.previousPage();
    }

    function goFirstPage()
    {
    myTable1.firstPage();
    }

    function goLastPage()
    {
    myTable1.lastPage();
    }</script><div id="main" style="visiblity: visible">
    <input type="text" value="" /> 
    <input type="button" value="click" onclick="show()" />
    </div><div id="data" style="position:absolute;padding:5px;z-index:100;cursor:hand;left:50px;top:50px;display:none">
    移动栏
    <OBJECT
    ID="myData1" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
    BORDER="0" WIDTH="0" HEIGHT="0">
    <PARAM NAME="DataURL" value="data2.txt">
    <PARAM NAME="UseHeader" VALUE="True">
    </OBJECT>
    <table id="outer_table" border=3 bordercolor="yellow">
    <tr>
    <td>
    <table border=2 id="myTable1" DATASRC=#myData1 DATAPAGESIZE="10"
    bordercolor="blue">
    <thead>
    <tr>
    <td>公司名称</td>
    <td>联系人姓名</td>
    </tr>
    </thead>
    <tbody>
    <tr height=25px valign="middle">
    <td width="70">
    <input id="input" type="radio" name="radio" />
    </td>
    <td width="110">
    <div DATAFLD="公司名称">
    </td>
    <td width="70">
    <div DATAFLD="联系人姓名">
    </td>
    </tr>
    </tbody>
    </table>

    <table align="center" border=2>
    <tr>
    <td align="center">
    <input id="first" type="button" value=" 第一页 " onclick="goFirstPage()"> 
    <input id="next" type="button" value=" 下一页 " onclick="goNextPage()"> 
    <input id="previous" type="button" value=" 上一页 " onclick="goPrePage()">
    <input id="last" type="button" value=" 最后一页 " onclick="goLastPage()">
    </td>
    </tr>
    <tr>
    <td align="center">
    <input type="button" value=" 确认 " onclick="hide()" /> 
    <input type="button" value=" 取消 " onclick="hide()" />
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>  
    </div>
    </body>
    </html>
      

  6.   

    改后还是提示错误
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>放大镜</title>
    </head>
    <body><script language="JavaScript">
       
    crossobj=document.getElementById("data");
    document.onmousedown=initializedrag;
    document.onmouseup=new Function("dragapproved=false");

    function initializedrag(){
    if(event.srcElement.id=="data"){
    offsetx=event.clientX;
    offsety=event.clientY;
    tempx=parseInt(crossobj.style.left);  
    tempy=parseInt(crossobj.style.top);
    dragapproved=true;
    document.onmousemove=drag_drop;
    }
    }
       
    function drag_drop(){
    if(dragapproved){
    crossobj.style.left=tempx+event.clientX-offsetx;
    crossobj.style.top=tempy+event.clientY-offsety;
    return false;
    }   
    }
          
    function show()
    {
    document.getElementById("main").style.display="none";
    document.getElementById("main").style.visibility="hidden";
    document.getElementById("data").style.display="block";
    document.getElementById("data").style.visibility="visible";
    }

    function hide()
    {
    document.getElementById("main").style.display="block";
    document.getElementById("data").style.visibility="hidden";
    } function goNextPage()
    {
    myTable1.nextPage();
    }

    function goPrePage()
    {
    myTable1.previousPage();
    }

    function goFirstPage()
    {
    myTable1.firstPage();
    }

    function goLastPage()
    {
    myTable1.lastPage();
    }</script><div id="main" style="visiblity: visible">
    <input type="text" value="" /> 
    <input type="button" value="click" onclick="show()" />
    </div><div id="data" style="position:absolute;padding:5px;z-index:100;cursor:hand;left:50px;top:50px;display:none">
    移动栏
    <OBJECT
    ID="myData1" CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"
    BORDER="0" WIDTH="0" HEIGHT="0">
    <PARAM NAME="DataURL" value="data2.txt">
    <PARAM NAME="UseHeader" VALUE="True">
    </OBJECT>
    <table id="outer_table" border=3 bordercolor="yellow">
    <tr>
    <td>
    <table border=2 id="myTable1" DATASRC=#myData1 DATAPAGESIZE="10"
    bordercolor="blue">
    <thead>
    <tr>
    <td>公司名称</td>
    <td>联系人姓名</td>
    </tr>
    </thead>
    <tbody>
    <tr height=25px valign="middle">
    <td width="70">
    <input id="input" type="radio" name="radio" />
    </td>
    <td width="110">
    <div DATAFLD="公司名称">
    </td>
    <td width="70">
    <div DATAFLD="联系人姓名">
    </td>
    </tr>
    </tbody>
    </table>

    <table align="center" border=2>
    <tr>
    <td align="center">
    <input id="first" type="button" value=" 第一页 " onclick="goFirstPage()"> 
    <input id="next" type="button" value=" 下一页 " onclick="goNextPage()"> 
    <input id="previous" type="button" value=" 上一页 " onclick="goPrePage()">
    <input id="last" type="button" value=" 最后一页 " onclick="goLastPage()">
    </td>
    </tr>
    <tr>
    <td align="center">
    <input type="button" value=" 确认 " onclick="hide()" /> 
    <input type="button" value=" 取消 " onclick="hide()" />
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>  
    </div>
    </body>
    </html>