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

回答

相關問題