jQuery DOM操作

jqueryで何番目の行をクリックしているか調べる

log.miraoto.com

jQueryで特定の要素にcsscssプロパティを追加/変更/削除する記述方法

www.webopixel.net

jQueryで指定するセレクタに変数を利用するコード例|プログラミング

element.classNameは、「element」に指定した要素のclass属性の値を取得、もしくは、設定するプロパティ。 http://alphasis.info/2013/08/javascript-dom-elementobject-classname/

syncer.jp

wataame.sumomo.ne.jp

jquery5

<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;
    }
    </style>
</head>

<body>
<table id="testTable" border="1">
<tbody><tr>
<th>関東</th>
<td>東京</td>
</tr>
<tr>
<th>関東</th>
<td>千葉</td>
</tr>
<tr>
<th>関東</th>
<td>神奈川</td>
</tr>
<tr>
<th>近畿</th>
<td>大阪</td>
</tr>
<tr>
<th>近畿</th>
<td>兵庫</td>
</tr>
<tr>
<th>近畿</th>
<td>京都</td>
</tr>
</tbody></table>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
 $('#testTable').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;
    console.log(now_th.text());
   } else if (now_th.text() == pre_element.text()) {
         console.log(now_th.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 {
          console.log(now_th.text());
     pre_element = now_th;
    }
  });
 });
});
</script>
</body>
</html>

jquery4

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQueryの練習</title>

<style>
/* 内容 */
.tooltip-content {
    position: relative;
    left: -3px;
    top: -3px;

    background-color: #ffffe1;
    border: 1px black solid;
    padding: 3px;
}
/* 影 */
.tooltip-shadow {
    position: absolute;
    /*background-image: url('images/shadow.png');*/
}
</style>
</head>

<body>
<p onmouseover="tooltip.Schedule( this, event );" tooltip="ツールチップ">テキスト</p>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
Tooltip.DELAY = 300;    // 表示するまでの遅延時間
Tooltip.OFFSET = 5;     // マウスポインタからのオフセット
// ツールチップ
function Tooltip()
{
    // 内容
    this.content = document.createElement( 'div' );
    this.content.className = 'tooltip-content';

    // 影
    this.shadow = document.createElement( 'div' );
    this.shadow.className = 'tooltip-shadow';

    this.shadow.appendChild( this.content );
}
// ツールチップを表示する
Tooltip.prototype.Show = function( text, x, y )
{
    // 内容
    while( this.content.hasChildNodes() )
    {
        this.content.removeChild( this.content.lastChild );
    }
    this.content.appendChild( document.createTextNode( text ) );

    // 影
    this.shadow.style.left = x + 'px';
    this.shadow.style.top = y + 'px';
    this.shadow.style.visibility = 'visible';


    if( this.shadow.parentNode != document.body )
    {
        // ドキュメントのbody要素に追加する
        document.body.appendChild( this.shadow );
    }
}
// ツールチップを隠す
Tooltip.prototype.Hide = function()
{
    this.shadow.style.visibility = 'hidden';
}
// ツールチップの表示を予定する
Tooltip.prototype.Schedule = function( targetElement, event )
{
    var e = event || window.event;

    var x = e.clientX;
    var y = e.clientY;

    // マウスポインタの位置をドュメント座標に正する
    x += window.pageXOffset || document.documentElement.scrollLeft;
    y += window.pageYOffset || document.documentElement.scrollTop;

    // イベントハンドラ内で処理できthisンす
    var _this = this;


    // タイムアウト処理を設定する
    var timerID = window.setTimeout(
        function()
        {
            var text = targetElement.getAttribute( 'tooltip' );

            // ツールチップを示す
            _this.Show(
                text,
                x + Tooltip.OFFSET,
                y + Tooltip.OFFSET
                );
        },
        Tooltip.DELAY
        );


    function MouseOut()
    {
        // ツールチップを隠す
        _this.Hide();

        // 未処理のタイムアウト処理を取消す
        window.clearTimeout( timerID );

        // イベントハンドラを削除する
        if( targetElement.removeEventListener )
        {
            targetElement.removeEventListener( 'mouseout', MouseOut, false );
        }
        else
        {
            // IE用の処理
            targetElement.detachEvent( 'onmouseout', MouseOut );
        }
    }

    // イベントハンドラを登録する
    if( targetElement.addEventListener )
    {
        targetElement.addEventListener( 'mouseout', MouseOut, false );
    }
    else
    {
        // IE用の処理
        targetElement.attachEvent( 'onmouseout', MouseOut );
    }
}
</script>
<script type="text/javascript">
  // ツールチップを生成する
  var tooltip = new Tooltip();
</script>
</body>
</html>

jquery3

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQueryの練習</title>
<style>
/* 表示文字の装飾 */
div.tooltip1{
    color: #555;
    display: inline-block;                        /* インライン要素化 */
    border-bottom:dashed 1px #555;    /* 下線を引く */
}

/* ツールチップ部分を隠す */
div.tooltip1 span {
    display: none;
}

/* マウスオーバー */
div.tooltip1:hover {
    position: relative;
    color: #333;
}

/* マウスオーバー時にツールチップを表示 */
div.tooltip1:hover span {
    display: block;                  /* ボックス要素にする */
    position: absolute;            /* relativeからの絶対位置 */
    top: 25px;
    font-size: 90%;
    color: #fff;
    background-color: #51A2C1;
    width: 800px;
    padding: 5px;
    border-radius:3px;
    z-index:100;
}

/* フキダシ部分を作成 */
div.tooltip1 span:before{
    content:'';
    display:block;
    position:absolute;                         /* relativeからの絶対位置 */
    height:0;
    width:0;
    top:-13px;
    left:15px;
    border:13px transparent solid;
    border-right-width:0;
    border-left-color:#51A2C1;
    transform:rotate(270deg);            /* 傾きをつける */
    -webkit-transform:rotate(270deg);
    -o-transform:rotate(270deg);
    z-index:100;
}
</style>
</head>
<body>
  <p id="target">ターゲットだゆん</p>
  <ul></ul>
<div id='aaa'>
</div>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
  // $('#target').append('<span>要素内の最後に挿入</span>');
  // $('ul').append('<li>追加されました</li>');
  $('#aaa').append('<span>サンプル<br />フキダシのようなツールチップ</span>');

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

jquery2

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQueryの練習</title>

<style>
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: #333;
    color:#fff;
    border: 1px solid red;
    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>
  <a href="" class="tooltip" title="Minimal</br>aaaaa</br>">Shotoku</a></br>
  <a href="" class="tooltip" title="<table><tr><td>maaaa1111111111111111111111111111111</td></tr><tr><td>111111111111111111111111111111111111111111111111</td></tr><tr><td>111111111111111111111111111111111111111111111111</td></tr></table>">Shotoku1</a></br>
  <a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
  <a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
  <a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
  <a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
  <a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
  <a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
  <a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
  <a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
  <a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
  <a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
  <a href="" class="tooltip" title="maaaa">Shotoku1</a></br>
</p>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
this.t_tip = function() {
    //ツールチップの出る場所
    this.xOffset = -10;
    this.yOffset = 20;
    //マウスホバーイベント
    $("a").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(){
  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>

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>

JSFのサンプル

index.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Sample02</title>
    </h:head>
    <h:body>
        <h2>名簿データの作成</h2>
        <h:form>
            番号:<h:inputText value="#{meiboBean.number}" /><br/>
            氏名:<h:inputText value="#{meiboBean.name}" /><br/>
            <h:commandButton value="送信"  action="#{meiboBean.next()}"/>
        </h:form>
    </h:body>
</html>

Output.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Sample02</title>
    </h:head>
    <h:body>
        <h2>名簿データの確認</h2>
        <h:form>
            番号:<h:outputText value="#{meiboBean.number}"/><br/>
            氏名:<h:outputText value="#{meiboBean.name}"/><br/>
            <h:link outcome="index">[戻る]</h:link>
        </h:form>
    </h:body>
</html>

MeiboBean.java

package beans;

import javax.enterprise.context.RequestScoped;
import javax.inject.Named;

@Named
@RequestScoped
public class MeiboBean {

    private Integer number;
    private String name;

    public String next() {
        System.out.println("★number=" + this.number + "/ name=" + this.name);
        return "output.xhtml"; // 次に表示するウェブページ
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getNumber() {
        return number;
    }

    public void setNumber(Integer number) {
        this.number = number;
    }
}