如何显示在jQuery的工具提示用于动态创建的HTML表格

Question

我已经JQuery的

function draw_top_five_table(data) { 
     var json_array = data.json_array; 
    /*Top five stat entities table*/ 
    var table_string = "<table class='common_data_grid top20' cellpadding='0' cellspacing='0' width='100%' id='top_five_table'>" 
         + "<tr><td> </th><th>URL</th><th width='90'>Total Hits</th><th width='380'>Percentage of all Hits</th></tr>" 

    for (var json_count = 0; json_count < json_array.length; json_count++) 
    { 
     var raw_tag = "<tr><td>" + (json_count+1) + "</td>" 
      + "<td><a title=" + json_array[json_count].url_name + " href=/tophundredviewreport/?key=" 
      + json_array[json_count].url_id + ">" 
      + json_array[json_count].url_name + "</a></td>" 
      + "<td align='right'><div title='<div>Facebook Hits:" + json_array[json_count].facebook_count 
      + "<br/> Twitter Hits:" + json_array[json_count].twitter_count 
      + "<br/> Google+ Hits:" + json_array[json_count].buzz_count 
      + "<br/> LinkedIn Hits:" + json_array[json_count].linkedin_count 
      + "<br/> Digg Hits:" + json_array[json_count].digg_count 
      + "<br/> Delicious Hits:" + json_array[json_count].delicious_count 
      + "<br/> Reddit Hits:" + json_array[json_count].reddit_count + "</div>'>" 
      + json_array[json_count].total_count + "</div></td>" 
      + "<td><div title='<div>Facebook Hits:" 
      + (json_array[json_count].facebook_count/json_array[json_count].sum_total*100).toFixed(2) + "%" 
      + "<br/> Twitter Hits:" + (json_array[json_count].twitter_count/json_array[json_count].sum_total*100).toFixed(2) + "% " 
      + "<br/> Google+ Hits:" + (json_array[json_count].buzz_count/json_array[json_count].sum_total*100).toFixed(2) + "%" 
      + "<br/> LinkedIn Hits:" + (json_array[json_count].linkedin_count/json_array[json_count].sum_total*100).toFixed(2) +" %" 
      + "<br/> Digg Hits:" + (json_array[json_count].digg_count/json_array[json_count].sum_total*100).toFixed(2) + "%" 
      + "<br/> Delicious Hits:" + (json_array[json_count].delicious_count/json_array[json_count].sum_total*100)+" %" 
      + "<br/> Reddit Hits:" + (json_array[json_count].reddit_count/json_array[json_count].sum_total*100).toFixed(2) + "%</div>'" 
      + "class='progress'>" + (json_array[json_count].total_count/json_array[json_count].sum_total*100).toFixed(2) + "</div></td>" 
      + "</tr>" 
     table_string = table_string + raw_tag; 
    } 
    var end_tag = "</table>"; 
    table_string = table_string + end_tag + "<br>"; 

    $("#top_five_stat").html(table_string) 
    $('.common_data_grid td .progress').each(function(){ 
     $this = $(this); 
     $percentage = $this.text(); 
     $this.empty(); 
     $this.wrapInner('<div class="progress_inner" />'); 
     $('.progress_inner',$this).text(' '); 
     $width = ((200/100)*$percentage); 
     $this.animate({width:$width},3000); 
     $this.parent().append('<span class="number">'+ $percentage +'%</span>'); 
    }); 
    } 

但刀尖有SA问题创建的表动态地表示击穿两列三。它没有正确渲染，并且一旦我将鼠标移到它上面，就会显示HTML元素。任何人都可以帮我解决这个问题吗？

Answer 1

您的意思是浏览器显示的原始工具提示，其值为title属性？
不幸的是，您不能将HTML放在那里，它将被视为纯文本。

你必须使用工具提示插件来格式化/复杂的工具提示内容。基于jQuery有很多，其中：

• qTip
• clueTip
• jQuery Tools
• TipTip
• Coda Popup Bubbles

顺便说一句，我注意到一个问题，你的代码，你必须在double-q之间加上href值uotes：

... + " href=/tophundredviewreport/?key=" + (id) + ">" + ... 

should be 

... + " href=\"/tophundredviewreport/?key=" + id + "\">" + ... 

为了减轻你的代码一点点，因为这将是一个有点更有效率，我会从数组中提取当前项目的环，就像这样：

for (var json_count = 0; json_count < json_array.length; json_count++) 
{ 
    var item = json_array[json_count]; 

    // then you can use item.twitter_count, item.url_name ... 
}