JavaScript在页面加载时不工作qtip2

我在javascript中编写了一个很好的热图，而且迄今为止工作得非常好。基于表中显示的值的阈值，热图基本上是具有着色变化的表格。我使用JavaScript来创建表格，并设置颜色。但是，我想显示一个很好的弹出窗口，因此当用户将鼠标悬停在表格的单元格上时，会显示一些其他信息。我发现这个库qTip2 JavaScript在页面加载时不工作qtip2

$(document).ready(function(){ 

     $('#mytable td').qtip({ 
      overwrite : false,    // make sure it can't be overwritten 
      content : { 
       text : function(api){ 
        return "Time spent: " + $(this).html(); 
       } 
      }, 
      position : { 
       my : 'top left', 
       target : 'mouse', 
       viewport : $(window),  //keep it on-screen at all time if possible 
       adjust : { 
        x : 10, y : 10 
       } 
      }, 
      hide : { 
       fixed : true    // Helps to prevent the tooltip from hiding occassionaly when tracking! 
      }, 
      style : 'ui-tooltip-tipsy ui-tooltip-shadow' 
     }); 
    });

这个函数创建热图：

function makeTable(data) 
    { 
     var row = new Array(); 
     var cell = new Array(); 

     var row_num = 26; 
     var cell_num = 44; 

     var tab = document.createElement('table'); 
     tab.setAttribute('id', 'mytable'); 
     tab.border = '1px'; 

     var tbo = document.createElement('tbody'); 

     for(var i = 0; i < row_num; i++){ 
      row[i] = document.createElement('tr'); 

      var upper = (i+1)*44; 
      var lower = i*44; 
      for(var j = lower; j < upper; j++){ 
       cell[j] = document.createElement('td'); 
       //cell[j].setAttribute('class', 'selector'); 
       if(data[j] != undefined){ 
        var count = document.createTextNode(data[j].diff); 
        cell[j].appendChild(count); 
        var index = parseInt(data[j].diff); 
        /* specify which color better suits the heatmap */ 
        if(index >= 0 && index <= 100){ 
         cell[j].style.backgroundColor = '#00BFFF'; 
        } 
        else if(index > 100 && index <= 1000){ 
         cell[j].style.backgroundColor = "#6495ED"; 
        } 
        else if(index > 1000 && index <= 4000){ 
         cell[j].style.backgroundColor = "#4682B4"; 
        } 
        else if(index > 4000 && index <= 6000){ 
         cell[j].style.backgroundColor = "#0000FF"; 
        } 
        else{ 
         cell[j].style.backgroundColor = "#00008B"; 
        } 
        row[i].appendChild(cell[j]); 
       } 
      } 

      tbo.appendChild(row[i]); 
     } 

     tab.appendChild(tbo); 
     document.getElementById('mytable').appendChild(tab); 
    }

里面我<body>标签的，我有：

<div id="body"> 
     <div id="mytable"></div> 
    </div>

然而，当我加载网页，我希望当我将鼠标悬停在桌子的单元格上时，看到弹出框，但是发生了一些事情。另外，当我执行萤火虫终端的$(document).ready部分时，程序开始按照假设执行。我还确保在使用该库之前，该库已加载到我的页面中。我也没有看到萤火虫终端的任何错误。 <script src="http://localhost/heatmap/javascript/jquery.qtip.js">

有人能给我一个线索为什么会发生这种情况？我的javascript的main功能

function OnLoad() { 
     $.post('index.php/heatmap/getDatalines', 
       function(answer){ 
        var data = eval('(' + answer + ')'); 
        var list = []; 
        makeTable(data); 
       }); 
    }

感谢

WHIS被称为负载：google.setOnLoadCallback(OnLoad);

来源

2012-07-09 cybertextron

你在哪里调用makeTable（）？你也可以创建一个描述问题的[jsfiddle]（http://jsfiddle.net/）？ – 2012-07-09 20:50:27

您需要创建qtip已装入表之后是这样的：

function OnLoad() { 
    $.post('index.php/heatmap/getDatalines', 
     function(answer){ 
      var data = eval('(' + answer + ')'); 
      var list = []; 

      makeTable(data); 

      $('#mytable td').qtip({ 
       overwrite : false,   // make sure it can't be overwritten 
       content : { 
        text : function(api){ 
         return "Time spent: " + $(this).html(); 
        } 
       }, 
       position : { 
        my : 'top left', 
        target : 'mouse', 
        viewport : $(window), // keep it on-screen at all time if possible 
        adjust : { 
         x : 10, y : 10 
        } 
       }, 
       hide : { 
        fixed : true // Helps to prevent the tooltip from hiding occassionaly when tracking! 
       }, 
       style : 'ui-tooltip-tipsy ui-tooltip-shadow' 
      }); 
     }); 
    }

来源

2012-07-09 20:57:15

对钱！ – cybertextron 2012-07-09 20:59:34

JavaScript在页面加载时不工作qtip2

回答

相关问题