読者です 読者をやめる 読者になる 読者になる

jquery1

<!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>