<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryの練習</title>
<style>
table{
margin: 15px auto 10px auto;
}
th{
padding:5px;
background:#266;
border:1px solid #777;
color: #fff;
}
td{
border:solid 1px #777;
background:#eee;
padding:5px;
}
table tr.odd td {
background: #ccc;
}
p{font-size:12px; line-height:16px;}
a{color:red ;}
#tip_body { /*ツールチップのデザイン*/
display: none;
position: absolute;
padding: 10px;
left: 5px;
font-size: 0.8em;
background-color: white;
color:black;
border: 1px solid black;
opacity: 0.9 ;
filter:progid:DXImageTransform.Microsoft.Alpha(Enabled=1,Style=0,Opacity=90) ;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
z-index: 9999； }
</style>
</head>
<body>
<p>jQueryの練習</p>
<div id="box" style="width:100px;height:100px;background:red;"></div>
<div id="box2" style="width:100px;height:100px;background:blue;"></div>
<h2 id="elem">ID名elemの要素</h2>
<button>click</button>
<button id="btn2">click2</button>
<p id="p2">表示されてるメッセージ</p>
<p>処理が実行された回数: <span id="result">0</span></p>
<p>
<a href="" class="tooltip" title="Minimal</br>aaaaa</br>">Shotoku</a>
</p>
<table id="table1">
<tr class='trx'><th class='tooltip' title="Minimal</br>aaaaa</br>">12345</th><td>aaaa</td></tr>
<tr class='trx'><th class='tooltip' title="Minimal</br>aaaaa</br>">12345</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
<tr class='trx'><th>1234</th><td>aaaa</td></tr>
</table>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
this.t_tip = function() {
//ツールチップの出る場所
this.xOffset = -10;
this.yOffset = 20;
//マウスホバーイベント
$(".tooltip").unbind().hover(
function(e) {
//要素のtitle属性を取得してspanの中に含める
this.t = this.title;
this.title = '';
this.top = (e.pageY + yOffset);
this.left = (e.pageX + xOffset);
$('body').append( '<span id="tip_body">' + this.t + '</span>' );
$('#tip_body').css("top", this.top+"px").css("left", this.left+"px").fadeIn("farst");
},
function() {
this.title = this.t;
$("#tip_body").remove();
}
//マウスの動きに合わせる
).mousemove(
function(e) {
this.top = (e.pageY + yOffset);
this.left = (e.pageX + xOffset);
$("#tip_body").css("top", this.top+"px").css("left", this.left+"px");
}
);
};
$(function() {
// hide, show
// fadeOut, fadeIn
// toggle
//$('#box').hide(800);
//$('#box').fadeOut(800);
//$('#box').toggle(800);
$('#box').fadeOut(800, function() {
// alert("gone!");
});
$('#box').fadeIn(800, function() {
});
// テーブルをストライプ表示に
$(function() {
$('tr:nth-child(odd)').addClass('odd');
});
var pre_element = null;
var col_num = 0;
$(".trx").each(function(i, elem) {
console.log(i + ': ' + $(elem).find('th').text());
var now_th = $(this).find('th');
if (pre_element == null) {
pre_element = now_th;
console.log(now_th.text());
} else if (now_th.text() == pre_element.text()) {
now_th.remove();
if (pre_element.attr('rowspan') == null) pre_element.attr('rowspan', 1);
pre_element.attr('rowspan', parseInt(pre_element.attr('rowspan'),10) + 1);
} else {
pre_element = now_th;
}
console.log(now_th.text());
});
$('.trx').each(function () {
var pre_element = null;
var col_num = 0;
$(this).find('tr').each(function () {
var now_th = $(this).find('th').eq( col_num );
if (pre_element == null) {
pre_element = now_th;
} else if (now_th.text() == pre_element.text()) {
now_th.remove();
if (pre_element.attr('rowspan') == null) pre_element.attr('rowspan', 1);
pre_element.attr('rowspan', parseInt(pre_element.attr('rowspan'),10) + 1);
} else {
pre_element = now_th;
}
});
});
$(document).ready(function(){
$("#elem").mouseover(function(){
// 実行回数のカウント
$("#result").html( parseInt( $("#result").html() ) + 1 );
});
$('#box').on('click',function(){
$('#box').fadeOut(800, function() {
$('#box').fadeIn(800);
});
});
$('p').on('click',function(){
// alert("hogehoge");
});
$('#box2').on('click',function(){
$('#box2').toggle(800);
$('#box2').toggle(800);
});
$('button').click(function(){
$('#p2').hide();
$("#btn2").prop("disabled", false);
});
$('#btn2').click(function(){
$('#p2').show();
$("#btn2").prop("disabled", true);
});
});
});
$(function(){
// var hoge = $('a').html();
// console.log($('a').length);
// console.log(hoge);
// console.log(hoge.length);
// $('.tooltip').each(function(i) {
// console.log(i + ': ' + $(this).text());
// });
t_tip();
});
</script>
</body>
</html>
