ここから本文です

javascriptを使って作ったtableに対してスクロールバーの変更をしたいです。

nm1********さん

2013/1/1518:57:45

javascriptを使って作ったtableに対してスクロールバーの変更をしたいです。

htmal上に直接tableを記述するとスクロールバーは変更されたものが表示されます。

javascriptで書いたtableだとスクロールバーは表示されません。

javascrript上で書きたいのですが、不可能なのでしょうか?



コードは以下になります。
- javascript -

$(function(){
$('.scroll-pane').jScrollPane();

$('.jspDrag').css('opacity',0);

$('#scroll').hover(function(){
$('.jspDrag').animate({opacity:1});
},function(){
$('.jspDrag').animate({opacity:0});
});

});

window.onload=function(){
/* tableの設定*/

var news="<table>"+
"<tr><th>2012.11.10</th></tr>"+
"<tr><td>aaaaaaaaaaaaaaaaaaa</td></tr>"+

"<tr><th>2012.11.10</th></tr>"+
"<tr><td>bbbbbbbbbbbbbbbbbbb</td></tr>"+

"<tr><th>2012.11.10</th></tr>"+
"<tr><td>ccccccccccccccccccc</td></tr>"+

"<tr><th>2012.11.10</th></tr>"+
"<tr><td>ddddddddddddddddddd</td></tr>"+

"<tr><th>2012.11.10</th></tr>"+
"<tr><td>eeeeeeeeeeeeeeeeeee</td></tr>"+

"</table>";
document.getElementById("scroll").innerHTML=news;
}


- html -

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.jscrollpane.css" />
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="js/base.js"></script>
</head>
<body>
<div id="scroll" class="scroll-pane">
</div>
</body>
</html>


- css -

#scroll{
height:130px;
width:220px;
overflow-y:scroll;
border:1px solid #000000;
}


詳しい方、教えてください。
よろしくお願いします。

閲覧数:
467
回答数:
1
お礼:
100枚

違反報告

ベストアンサーに選ばれた回答

a-kuma3さん

2013/1/1711:10:36

jScrollPane の初期化を、table の HTML を作った後に呼んでやる。


window.onload=function(){
/* tableの設定*/
var news="<table>"+
...
document.getElementById("scroll").innerHTML=news;

$('.scroll-pane').jScrollPane(); // ★
}

質問した人からのコメント

2013/1/18 11:52:45

成功 できました!
ありがとうございました!

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる