0

週にカーソルを合わせると、各日のデータを含む 1 週間の日付をポップアップ表示しようとしています。週の日付をクリックするとディスプレイをポップアップさせることができますが、マウスオーバー/マウス入力で発生させたいです。ここに私が持っているコードがあります:

    <html>  
    <head>  
      <link href="./jquery-ui.css" rel="stylesheet" type="text/css"/>  
      <script type="text/javascript" src="./jquery.min.js"></script>  
      <script src="./jquery-ui.min.js"></script>  
      <script type="text/javascript" src="./popup.js"></script>

      <script>  

      var dateString;
      var sundayDate;
      var mondayDate;
      var tuesdayDate;
      var wednesdayDate;
      var thursdayDate;
      var fridayDate;
      var saturdayDate;


      $(document).ready(function() {  
        $("#datepicker").datepicker({
                showOtherMonths: true,
                selectOtherMonths: true,
                onSelect: function(dateText, inst) {
                    var date = new $(this).datepicker('getDate');
                    sundayDate    = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
                    mondayDate    = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 1);
                    tuesdayDate   = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 2);
                    wednesdayDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 3);
                    thursdayDate  = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 4);
                    fridayDate    = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 5);
                    saturdayDate  = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
                }
        });

        $('td a').live('mouseenter', function () {
            popup('<table border="1" width="350">' +
            '   <tr>' +
            '      <th>Su</th>' +
            '      <th>Mo</th>' +
            '      <th>Tu</th>' +
            '      <th>We</th>' +
            '      <th>Th</th>' +
            '      <th>Fr</th>' +
            '      <th>Sa</th>' +
            '   </tr>' +
            '   <tr height= "50px">' +
            '      <td valign="top" width = "50px">' + sundayDate.getDate() + '</td>' +
            '      <td valign="top" width = "50px">' + mondayDate.getDate() + '</td>' +
            '      <td valign="top" width = "50px">' + tuesdayDate.getDate() + '</td>' +
            '      <td valign="top" width = "50px">' + wednesdayDate.getDate() + '</td>' +
            '      <td valign="top" width = "50px">' + thursdayDate.getDate() + '</td>' +
            '      <td valign="top" width = "50px">' + fridayDate.getDate() + '</td>' +
            '      <td valign="top" width = "50px">' + saturdayDate.getDate() + '</td>' +
            '   </tr>' +
            '</table>');
        });

      });
    </script> 
    </head>  
    <body>  

    <div class="demo">
        <div id="datepicker"></div>
    </div>

    </body>  
    </html>

.live の代わりに .on を使用する方法について読んだことがありますが、これは現在の方法ですが、「マウスオーバー」で選択された日付を取得して現在の日付を表示する方法についてはまだわかりません。週の表の外観の書式設定とデータの入力は処理できますが、マウスが置かれた日付を選択して onSelect アクションをトリガーする必要があります。

これに対する応答を前もって感謝します。

4

1 に答える 1

0

次のような効果のあるボタンまたはその他のオブジェクトを使用することで、これをトリガーできると思います。

<label onmouseover="mouseenter">move here</label>
于 2012-08-18T14:22:11.957 に答える