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

amazonパントリー

普段買ってるもので

項目 ヨーカドー 西友 amazon
はごろも シーチキン Lフレーク 70g×3個 288円 384円
column column column
will will will
be be be
left right center
aligned aligned aligned

Javaの基本まとめ

www.task-notes.com

www.task-notes.com

www.task-notes.com

www.task-notes.com

www.task-notes.com

jQuery table

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <title>スクロール実験</title>
</head>
<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;
        } else if (now_th.text() == pre_element.text()) {
          // 要素を削除
          now_th.remove();
          // rowspanがnullの場合
          if (pre_element.attr('rowspan') == null) {
            // rowspanに1を設定
            pre_element.attr('rowspan', 1);
          }
          //
          pre_element.attr('rowspan', parseInt(pre_element.attr('rowspan'),10) + 1);
        } else {
          //
          pre_element = now_th;
        }
      });
    });

    $("#radio01").click(function() {
        $("tr").show();
    });
    $("#radio02").click(function() {
      $('#testTable').each(function() {
        var col_num = 0;
        $(this).find('tr').each(function() {
          var now_th = $(this).find('td').eq( col_num );
          console.log($(now_th).attr('class'));
          if (now_th.text() === "千葉") {
            $(".tr千葉").hide();
          }
        });
      });
    });
  });
</script>

<body style="text-align:center;">
  <table id="testTable" border="1">
<tbody>
  <tr class="tr東京"><th class="th東京">関東</th><td class="row東京">東京</td></tr>
  <tr class="tr千葉"><th class="th千葉">関東</th><td class="row千葉">千葉</td></tr>
  <tr class="tr神奈川"><th class="th神奈川">関東</th><td class="row神奈川">神奈川</td></tr>
  <tr class="tr大阪"><th class="th大阪">近畿</th><td class="row大阪">大阪</td></tr>
  <tr class="tr兵庫"><th class="th兵庫">近畿</th><td class="row兵庫">兵庫</td></tr>
  <tr class="tr京都"><th class="th京都">近畿</th><td class="row京都">京都</td></tr>
</tbody></table>
<label><input type="radio" id="radio01" name="radios01" checked="checked" />表示</label>
<label><input type="radio" id="radio02" name="radios01" />非表示</label>
</body>
</html>

ツールチップ

<?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"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
    <h:head>
        <title>sample09-5</title>
        <h:outputStylesheet name="mystyle.css" library="css" />
        
        <style>
            #tip_body { /*ツールチップのデザイン*/
        display: none;
        position: absolute;
        padding:    10px;
        left:        5px;
        font-size: 0.8em;
        background-color: white;
        color:black;
        width: 500px;
        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; }

.invisible{
    display: none;
}

a.clickToolTip{
    margin: 0;
    padding: 2px 6px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    text-decoration: none;
    color: #fff;
    background-color: green;
    font-size: 12px;
}

p.tooltip1{
    margin: 0;
    padding: 10px;
    width: 250px;
    background-color: #000;
    opacity: 0.6;
    color: #fff;
    border-radius: 5px;
    -moz-border-radius: 5px;
    min-height: 30px;
    top: 100px;
    left: 20px;
    position: absolute;
}

.dummy {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
}
    </style>

    </h:head>
    <h:body>
        <div id="sample" class="sampleClassName1"></div>
<button onclick="getClassName();">getClassName()</button>
<p>id属性がsampleである要素のclass属性の値:<span id="sampleOutput1"></span></p>
<button onclick="setClassName();">setClassName()</button>
<p>class属性の値を変更後:<span id="sampleOutput2"></span></p>
<table class="clickToolTip">
<tr>
<th><!-- 変更点: aタグのクラスをclickToolTipAnkerに変更 -->
  <div class="tooltipWrapper">
  タイトル&nbsp;<a href="javascript:void(0);" class="clickToolTipAnker">?</a>
  <!-- 変更点: pタグをこの位置に。idは削除 -->
  <p class="tooltip1 invisible">"タイトル"の説明</p>
  </div>
</th>
    <td><input type="text" name="title"></input></td>
</tr>

<tr>
<th>
  <div class="tooltipWrapper">
  メッセージ<a href="javascript:void(0);" class="clickToolTipAnker">?</a>
  <p class="tooltip1 invisible">"メッセージ"の説明<br />複数行の内容を<br />書くことも可能。<br /><br />複数行の内容を書くことも可能。<br />複数行の内容を書くことも可能。<br />複数行の内容を書くことも可能。<br />複数行の内容を書くことも可能。</p>
  </div>
</th>
<td><textarea name="message" rows="5" cols="30"></textarea></td>
</tr>
</table>
        <h:form>
            <h:dataTable value="#{bb.meibo}" var="m" columnClasses="c1,c2,c3,c4" headerClass="hd1" rowClasses="row">
                <f:facet name="header">会員一覧表</f:facet>
                <h:column headerClass="hd2">
                    <f:facet name="header">番号</f:facet>
                    <h:commandLink action="#{bb.edit(m)}">#{m.number}</h:commandLink>
                </h:column>
                <h:column headerClass="hd2">
                    <f:facet name="header">氏名</f:facet>
                    <h:outputText class='tooltip' title='#{m.name} #{m.mail} #{m.number}' value="#{m.name}" rendered="#{!m.editable}"/>
                    
                    <h:inputText value="#{m.name}" rendered="#{m.editable}" size="4" styleClass="inp"/>
                </h:column>
                <h:column headerClass="hd2" >
                    <f:facet name="header">メール</f:facet>
                    <h:outputText class="clickToolTip" value="#{m.mail}" rendered="#{!m.editable}"/>
                    <h:inputText                       value="#{m.mail}" rendered="#{m.editable}" size="10" styleClass="inp"/>
                        <div class="tooltipWrapper">
                        タイトル&nbsp;<a href="javascript:void(0);" class="clickToolTipAnker" data-no="#{m.number}" data-tooltip="#{m.mail}">?</a>
                        <p class="tooltip1 invisible">"タイトル"の説明</p>
                        </div>
                </h:column>
                <h:column headerClass="hd2">
                    <f:facet name="header">編集</f:facet>
                    <h:selectBooleanCheckbox value="#{m.editable}" onclick="submit()"/>
                </h:column>
            </h:dataTable>
            <h:commandButton action="#{bb.next()}" value="変更を保存"/>
        </h:form>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
    var $count = 1;
function getClassName() {
 var $elementNodeReference = document.getElementById( "sample" );
 var $className = $elementNodeReference.className;
 document.getElementById( "sampleOutput1" ).innerHTML = $className;
}
function setClassName() {
 var $elementNodeReference = document.getElementById( "sample" );
 $elementNodeReference.className = "sampleClassName" + ++$count;
 var $className = $elementNodeReference.className;
 document.getElementById( "sampleOutput2" ).innerHTML = $className;
}
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"><table><tr>' + this.t + '_12</tr></table></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(){
    
  // ツールチップ表示処理
  $('.clickToolTipAnker').click(function(e){

    dataTooltip = $(this).attr('data-tooltip');
    no = $(this).attr('data-no');
      // (html最後に挿入する)ツールチップ用pタグを作成
    insertHtml = '<p class="tgToolTip">' + dataTooltip + '</p>';

    // pタグをhtmlの最後に挿入
    if ($('.' + no).length) {
        $('.' +no).remove();
        return;
    } else {
        $('body').append(insertHtml);
    }

      // クリックされた [?] アイコンの座標を取得
      var position = $(this).position();
      var newPositionTop = position.top +30;      // +数値で下方向へ移動
      var newPositionLeft = position.left + 35;   // +数値で右方向へ移動
      
    // 出現するツールチップの位置を調整
    $(".tgToolTip").css({
        'top': newPositionTop + 'px',
        'left': newPositionLeft + 'px',
        'margin': '0',
        'padding': '0.5em 1em',
        'background-color': '#FFFF99',
        'border': '3px solid #000',
        'color': '#000000',
        'border-radius': '5px',
        '-moz-border-radius': '5px',
        'min-height': '1em',
        'position': 'absolute',
        'z-index': '100'
    }); 

    $('p.tgToolTip').attr('id', "id" + no);
    var $elementNodeReference = document.getElementById( "id" + no);
    $elementNodeReference.className = no;

        // (ツールチップの非表示処理) 非表示なクリック領域を展開
//        $('body').append('<p class="dummy"></p>');
  });
      // "ツールチップ以外の領域"をクリックでツールチップを隠す処理
//    $('body').on('click', '.dummy', function(){
//        $('p.tgToolTip').remove();
//        $('p.dummy').remove();
//    });
  t_tip();

    // ツールチップ表示処理 イベント自体はtableにセット。delegateでaタグ
    $('.clickToolTip').on('click', 'a.clickToolTipAnker', function(){
        var $this = $(this);
        //pタグは自分の親の子が持つp.tooltip
        var $p = $this.closest('.tooltipWrapper').find('.tooltip1');

        // [?]の座標を取得
        var position = $this.position();
        var newPositionTop = position.top +10;              /* + 数値で下方向へ移動 */
        var newPositionLeft = position.left + 35;           /* + 数値で右方向へ移動 */

        // ツールチップの位置を調整
        $p
        .css({'top': newPositionTop + 'px', 
              'left': newPositionLeft + 'px'})
        .removeClass('invisible');

    });
    // 表示されたツールチップを隠す処理(ツールチップ領域以外をマウスクリックで隠す)
    $('html').on('mousedown', function(event){
        // イベント発生源である要素を取得(クリックされた要素を取得)
        var clickedElement = event.target;

        // 取得要素が"toolTip"クラスを持ってなかったら、ツールチップを非表示に
        if(!$(clickedElement).hasClass('tooltip1')){
            $('p.tooltip1').addClass('invisible');
        }
    });

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

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>