Question

我有以下代码，我无法弄清楚为什么工具提示没有显示！我在静态表上尝试了这个css，它正在运行！

在代码中，表是根据带有标题的数组信息构建的，数据来自关联数组。

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>Json Array to Html Table</title>
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <style>
        .day {
            position: relative;
        }

        .day .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 1s;
        }

        .day .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

        .day:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
    </style>
</head>

<body>
    <p><br/><br/></p>
    <div id="tblContainer"></div>   
</body>

<script>
    $(document).ready(function(){
        // Table Headers
        var headers = ["S", "M", "T", "W", "T", "F", "S"];  

        // Json Array
        var myData = [
             {"Date":"25/12/2016", "MonthName":"January","DataDiff":"7","MonthDays":"31"},
             {"Date":"29/01/2017", "MonthName":"February","DataDiff":"3","MonthDays":"28"},
             {"Date":"26/02/2017", "MonthName":"March","DataDiff":"3","MonthDays":"31"},
             {"Date":"26/03/2017", "MonthName":"April","DataDiff":"6","MonthDays":"30"}
            ];              

        // Create Table
        var cityTable = makeTable_HeadersOnly($('#tblContainer'), headers, "Planner", 6 );

        // Append data from Json array
        appendTableRowsJsonFile(cityTable, myData); 
    });

    // Make Table just with headers
    function makeTable_HeadersOnly(container, data, id, nrTimes) {
        var table = $('<table id=' + id + '/>');
        var row   = $('<thead/>');

        row.append($('<tr/>'));

        // First Column
        row.append($('<th/>').text(""));

        // Generates the columns
        for (i=1; i <= nrTimes; i++) {
            $.each(data, function(colIndex, c) { 
                row.append($("<th/>").text(c));
            });
        }
        table.append(row);

        // tbody
        row   = $('<tbody/>');
        table.append(row);

        return container.append(table);
    }

    // append table row from json file
    function appendTableRowsJsonFile($table, jdata) {
        var day = 1;
        var diff = 0;
        var daysMth = 0;
        var data = "";
        $.each(jdata, function(key, value){
            // Month
            let tr = $("<tr/>");    
            tr.append($("<td/>").text(value.MonthName));

            // Fill days
            diff = parseInt(value.DataDiff);
            daysMth = parseInt(value.MonthDays);
            for (i = 1; i <= 42; i++) { 
                if (i <= diff ){
                    tr.append($("<td/>").text(''));
                } else if (i <= diff + daysMth) {       
                    day = i - diff;
                    tr.append($('<td/ class="day" data-date="show date">').text(day));
                } else{
                    tr.append($("<td/>").text(''));
                }
            }
            $table.find('tbody').last().append(tr);             
        });
    }

    // Tooltip - class 'day'
    $('.day').hover(function(e){
        alert('Tooltip');
        title = $(this).attr('data-date');
        $(this).append('<span class="tooltiptext">'+ title +'</span>');
    },
    function(e){
        $('span', this).remove();
    }); 
</script>
</html>

代码有什么问题？

此致埃利奥·费尔南德斯

Answer 1

这是具有约束力的问题。你在DOM上真正创建元素之前创建了绑定事件。

＆＃13;

$(document).ready(function(){
        // Table Headers
        var headers = ["S", "M", "T", "W", "T", "F", "S"];  

        // Json Array
        var myData = [
             {"Date":"25/12/2016", "MonthName":"January","DataDiff":"7","MonthDays":"31"},
             {"Date":"29/01/2017", "MonthName":"February","DataDiff":"3","MonthDays":"28"},
             {"Date":"26/02/2017", "MonthName":"March","DataDiff":"3","MonthDays":"31"},
             {"Date":"26/03/2017", "MonthName":"April","DataDiff":"6","MonthDays":"30"}
            ];              

        // Create Table
        var cityTable = makeTable_HeadersOnly($('#tblContainer'), headers, "Planner", 6 );

        // Append data from Json array
        appendTableRowsJsonFile(cityTable, myData); 
    });

    // Make Table just with headers
    function makeTable_HeadersOnly(container, data, id, nrTimes) {
        var table = $('<table id=' + id + '/>');
        var row   = $('<thead/>');

        row.append($('<tr/>'));

        // First Column
        row.append($('<th/>').text(""));

        // Generates the columns
        for (i=1; i <= nrTimes; i++) {
            $.each(data, function(colIndex, c) { 
                row.append($("<th/>").text(c));
            });
        }
        table.append(row);

        // tbody
        row   = $('<tbody/>');
        table.append(row);

        return container.append(table);
    }

    // append table row from json file
    function appendTableRowsJsonFile($table, jdata) {
        var day = 1;
        var diff = 0;
        var daysMth = 0;
        var data = "";
        $.each(jdata, function(key, value){
            // Month
            let tr = $("<tr/>");    
            tr.append($("<td/>").text(value.MonthName));

            // Fill days
            diff = parseInt(value.DataDiff);
            daysMth = parseInt(value.MonthDays);
            for (i = 1; i <= 42; i++) { 
                if (i <= diff ){
                    tr.append($("<td/>").text(''));
                } else if (i <= diff + daysMth) {       
                    day = i - diff;
                    tr.append($('<td/ class="day" data-date="' + day +'" >').text(day));
                } else{
                    tr.append($("<td/>").text(''));
                }
            }
            $table.find('tbody').last().append(tr); 
        });
         bindhover();
    }
function bindhover() {
          // Tooltip - class 'day'
          $('.day').unbind();
          $('.day').bind({
              mouseenter: function (e) { 
                  title = $(this).attr('data-date');
                  $(this).append('<span class="tooltiptext">' + title + '</span>');
              },
              function (e) {
                  $('span', this).remove();
              }
          });
      }

＆＃13;

.day {
            position: relative;
        }

        .day .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: #555;
            color: #fff;
            text-align: center;
            border-radius: 6px;
            padding: 5px 0;
            position: absolute;
            z-index: 1;
            bottom: 125%;
            left: 50%;
            margin-left: -60px;
            opacity: 0;
            transition: opacity 1s;
        }

        .day .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #555 transparent transparent transparent;
        }

        .day:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><br/><br/></p>
    <div id="tblContainer"></div>

＆＃13;

CSS工具提示没有显示

1 个答案: