ラベル jQuery の投稿を表示しています。 すべての投稿を表示
ラベル jQuery の投稿を表示しています。 すべての投稿を表示

2016年7月21日木曜日

jQueryでKey Valueのテーブルから、KeyでValueを検索

1.Tableの要素を取得
2.find("td.class")でKeyが入ってるtdを取得
3.eachでごりごり回しながら、Keyとマッチ
4.マッチしたら、next()で隣の要素を取得
5. return false;でeachから抜ける

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5サンプル</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="   crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
//alert("hello");

 //検索ボタンクリック
 $(document).on("click", "[id='seach']", function() {
  $('#testTable').each(function () {
   $(this).find('td.code').each(function () {
    $(this).next().attr('style', '');
   });
   $(this).find('td.code').each(function () {
    if($(this).text() == $('#search_word').val()) {
    //alert($(this).next().text());
      $(this).next().attr('style', 'background-color:yellow');
      return false;
    } else {
     $(this).next().attr('style', '');
    }
   });
  });
 });


/*
 // grep
 $(document).on("click", "[id='seach']", function() {
  $('#testTable').each(function () {
   $(this).find('td').each(function () {
    if($(this).text().match(new RegExp($('#search_word').val(),"g"))) {
     $(this).attr('style', 'background-color:yellow');
    } else {
     $(this).attr('style', '');
    }
   });
  });
 });
*/
});
</script>
</head>
<body>
<br />
テキストボックスに検索したい文字を入力&#12289;検索ボタンをクリックすると&#12289;
<br />
入力した文字列が含まれるセルの背景色が黄色に変わります&#12290;<br />
<br />
<input type="text" id="search_word"">
<button type="button" id="seach"> Search </button>
<table id="testTable" border ="1">
<tr>
<th>Key</th><th>Value</th>
</tr>
<script type="text/javascript">
for (i=0; i<=10;i++){
    document.write("<tr>");
    document.write("<td class=\"code\">" + i + "</td>");
    document.write("<td>" + Math.floor(Math.random() *1000) + "</td>");
    document.write("</tr>");
}
</script>
</table>
</body>
</html>
投稿者 時刻: 0 件のコメント:
ラベル: ,

2015年6月14日日曜日

jQuery JavaScript 対比メモ

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="./jquery-2.1.4.js" type="text/javascript"> </script>
    <script>
        $(function () {

//$(document).on('click', 'div', function() {
// $(this).css('background', 'red');
//});
var targetInput = ':text, :password, textarea';
$(targetInput).on('focus' , function(){
                $(this).css('background-color','Pink');
});

$(targetInput).on('blur', function(){
                $(this).css('background-color','White');
});

$(targetInput).blur(function(){
if ($(this).find('.jFocus')) {
$(this).removeClass('jFocus');
}
});
$('input:focus').css('background-color', 'Pink')

$('div').css('background-color', 'Aqua');

            $('input[name="btn1"]').on('click',function(){
//alert('AAA');
var regEx = /^[0-9]{1,2}/;
var txt = $('input[name="txt1"]').val();

if(txt.match(regEx)){
//alert('matched');
//document.getElementById('Result').innerText='<b>matched</b>'
//document.getElementById('Result').innerHTML='<b>matched</b>'
//$('#Result').text('Matched');
$('#Result').html('<b>Matched</b>');

//$('#Result').
}else{
//alert('Not matched');
//document.getElementById('Result').innerHTML='<b>Not matched</b>'

}
});
//$('#Buttion1').click(function (){
            //    alert('hello');
            //});
        });

function button_clicked(){
//alert("abcde");
var regEx = /^[0-9]{1,2}/;
var txt = document.getElementById('Text1').value;
if(txt.match(regEx)){
//alert('matched');
//document.getElementById('Result').innerText='<b>matched</b>'
document.getElementById('Result').innerHTML='<b>matched</b>'
}else{
//alert('Not matched');
document.getElementById('Result').innerHTML='<b>Not matched</b>'

}
};
    </script>
 
    <title></title>
</head>
<body>
    <div>
        <input id="Text1" type="text" name="txt1" />
    </div>
    <div>
        <input id="Button1" name="btn1" type="button" value="button1" />
<input id="Button2" type="button" value="button2" onClick="button_clicked();"/>
</div>
    <div id="Result" >
     
</div>

</body>
</html>

投稿者 時刻: 0 件のコメント:
ラベル: ,

jQueryでフォーカス時の色変更


http://luvsic.net/item/119
投稿者 時刻: 0 件のコメント:
ラベル:

jQuery セレクター



jQueryのセレクタメモ

基本セレクタ

タグ名 or クラス名 or ID による指定ができる。
$("form");       // タグ名="form"
$(".className"); // クラス名="className"
$("#formId");    // ID="formId"

複合条件の指定

区切りなしでAND、カンマ区切りでOR。

AND 指定

$("ul.listClass1"); // タグ名="ul" and クラス名="listClass1" 
$("ul#listId1");    // タグ名="ul" and ID="listId1"

OR 指定

$("div,.listClass1"); // タグ名="div" or クラス名=listClass1 
$("ul,#divId1");      // タグ名="ul"  or ID="divId1"

階層関係の指定

親-子関係

$("#root > .node");         // 「ID="root"」を親に持つ「クラス名="node"」 
$(".node").parent("#root"); // 「クラス名="node"」の親のうち「ID="root"」の要素

先祖-子孫関係

$("#root .node");            // 「ID="root"」を先祖に持つ「クラス名="node"」 
$(".node").parents("#root"); // 「クラス名="node"」の先祖のうち「ID="root"」の要素

兄-弟関係

$(".node").siblings(); // 「クラス名="node"」の兄弟（自分を除く）

フィルタ

属性

$('input[name]');          // タグ名="input" and name属性を持つ
$('input[name="quiz1"]');  // タグ名="input" and name属性が"quiz1"と一致
$('input[name!="quiz1"]'); // タグ名="input" and name属性が"quiz1"と不一致
$('input[name^="quiz1"]'); // タグ名="input" and name属性が"quiz1"と先頭一致
$('input[name$="quiz1"]'); // タグ名="input" and name属性が"quiz1"と末尾一致
$('input[name*="quiz1"]'); // タグ名="input" and name属性が"quiz1"と部分一致

使用可否

$('input[type="text"]:enabled');   // 入力可能テキストボックス
$('input[type="text"]:disabled');  // 入力禁止テキストボックス

選択状態

$('input[type="checkbox"]:checked'); // 選択済チェックボックス
$('input[type="radio"]:checked');    // 選択済ラジオボタン
$('select > option:selected');       // リストボックス・コンボボックス内の選択済要素

可視性

$('div:hidden');    // 不可視状態になっているdiv要素（display:noneも含む）
$('input:hidden');  // 不可視状態になっているinput要素≒$('input[type="hidden"]');
$('div:visible');   // 可視状態になっているdiv要

投稿者 時刻: 0 件のコメント:
ラベル:

2015年6月9日火曜日

jQueryリンク集

jQuery入門

Webアプリケーションのイベントモデル

イベントオブジェクト
投稿者 時刻: 0 件のコメント:
ラベル:

jQueryでキー制御

jQueryでファンクションキーやバックスペースキーを無効化する制御 
//------------------------
  // jQueryキー制御サンプル
  // return値falseによりキーキャンセル
  //------------------------
  $(document).keydown(function(event){
    // クリックされたキーのコード
    var keyCode = event.keyCode;
 
    // ファンクションキーを制御する
    // 制限を掛けたくない場合は対象から外す
    if(keyCode == 112 // F1キーの制御
     || keyCode == 113 // F2キーの制御
     || keyCode == 114 // F3キーの制御
     || keyCode == 115 // F4キーの制御
     || keyCode == 116 // F5キーの制御
     || keyCode == 117 // F6キーの制御
     || keyCode == 118 // F7キーの制御
     || keyCode == 119 // F8キーの制御
     || keyCode == 120 // F9キーの制御
     || keyCode == 121 // F10キーの制御
     || keyCode == 122 // F11キーの制御
     || keyCode == 123 // F12キーの制御
      )
    {
      return false;
    }
  });
投稿者 時刻: 0 件のコメント:
ラベル:
登録: 投稿 (Atom)