0

あるdivから別のdivに逐語的にコピーされるテーブルがあります。これは、本体がスクロール可能な固定テーブルヘッダーを作成できるようにするためです。最初のdividはで#headdiv、2番目のdivクラスは.bodydivであり、の内容は次の関数で#headdiv複製され.bodydivます。

$('.bodydiv').html($('#headdiv').html());

次に、2つのdivの表示/表示プロパティを変更して、1つのテーブルのように見せます。htmlとcssについてはこちらをご覧ください：http：//jsfiddle.net/jbswetnam/KNnAd/5/

ここで、ユーザーがテーブルのセルにカーソルを合わせたときにヘルプテキストを表示するようにします。要素IDを使用して、次の関数でこれを行うことができます。

//Copied and modified from https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Closures

function showInfo(info, display) {
  document.getElementById('infoBox').innerHTML = info; 
  document.getElementById('infoBox').style.display = display;   
}

function makeInfoCallback(info, display) {
  return function() {
     showInfo(info, display);
  };
}

function setupInfo() {
  var infoText = [
      {'id': 'header', 'info': 'Header Row'},
      {'id': 'alpha', 'info': 'Alpha'}
      ];

  for (var i = 0; i < infoText.length; i++) {
    var item = infoText[i];
     document.getElementById(item.id).onmouseover = 
        makeInfoCallback(item.info, "");
     document.getElementById(item.id).onmouseout = 
        makeInfoCallback("", "none");
  }
}
setupInfo();

http://jsfiddle.net/jbswetnam/KNnAd/5/で確認できるように、テーブルヘッダーにカーソルを合わせると、「HeaderRow」というテキストが表示されます。私がやろうとしているのは、「アルファ」と書かれたセルにカーソルを合わせると、「アルファ」というテキストが表示されるようにすることです。

関数が本文ではなくヘッダーで機能する理由を知っています。ヘッダーには上記の関数で参照されているIDがありますが、表示されているボディセルはコピー元#headdivであるため、そのIDは無効です。しかし、問題を解決する方法を知るには、Javascriptについて十分に知りません。idの代わりにクラスを使用しても機能しません。各セルから関数を使用して呼び出したり、スクリプト全体をリファクタリングできると感じていますが、thisその方法がわかりません。

どんな助けでもいただければ幸いです！

4

1 に答える 1

0

このコードで完了しました：

function makeInfo() {
$('.info').hover(
    function() {
        $('#infoBox').html($(this).attr('info'));
        $('#infoBox').css('display', '');  
    },
    function() {
        $('#infoBox').css('display', 'none');
    }); 
}

makeInfo();

同じjsfiddleで更新されたHTMLを見ることができます。

于 2013-03-26T00:45:14.540 に答える