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>');
    });
    }

但是工具提示存在问题，显示第二和第三列的分解。它没有正确渲染，只要我将鼠标放在它上面就会显示HTML元素。任何人都可以帮我解决这个问题吗？

Answer 1

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

您必须使用工具提示插件来生成格式化/复杂的工具提示内容。它们有很多基于jquery：

顺便说一句，我注意到代码中存在问题，您必须将href值括在双引号之间：

... + " 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 ...
}

如何在jquery中显示动态创建的HTML表的工具提示

1 个答案: