Category Archives: jquery

「jQuery入門」テーブルのカラムと行番号を取得するサンプル

①htmlコード
<table id=”userlist” border=”1″>
<tr><td>userAA1</td><td>userBB1</td><td>userCC1</td></tr>
<tr><td>userAA2</td><td>userBB2</td><td>userCC2</td></tr>
<tr><td>userAA3</td><td>userBB3</td><td>userCC3</td></tr>
</table>

②JSコード
$(function() {
$(‘#userlist td’).on(‘click’, function() {
var td = $(this)[0];
var tr = $(this).closest(‘tr’)[0];
console.log(‘列番号:’ + td.cellIndex);
console.log(‘行番号:’ + tr.rowIndex);
console.log(‘内容:’ + $(this).text());
});
});

「jQuery入門」json形式の文字列をオブジェクトに変換する

JSコード
$.ajax({
type:’POST’,
url: xxx,
data:xxxx
async:false,
dataType:’json’,
error : function(){
},
success:function(data){
var obj = $.parseJSON(data)
if(obj.username===”yamada”){
//処理コード
}
}
});

「jQuery開発」DataTablesで検索、ソート、ページャー機能を作成するサンプル

JSコード
$(document).ready(function() {
$(‘#table’).on(‘order.dt’,
function() {
console.log(‘ソート’);
}).on(‘search.dt’,
function() {
console.log(‘検索’);
}).on(‘page.dt’,
function() {
console.log(‘ページャー’);
}).dataTable();
});

「jQuery入門」toggleClass()でクラスの追加または削除サンプル

①JSコード
$(document).ready(function(){
$(“button”).click(function(){
$(“h1,h2,p”).toggleClass(“yellow”);
});
});

②CSSコード
<style type=”text/css”>
.yellow
{
color:yellow;
}
</style>
</head>

③htmlコード
<body>
<h1>test data1</h1>
<h2>test data2</h2>
<p>test data3</p>
<p>test data4</p>
<button>検証ボタン</button>
</body>

「jQuery入門」toggleClass()で複数cssを操作するサンプル

①htmlコード
<button id=”testBtn”>テスト</button>

②cssコード
.testAA {
//some code
}
.testBB {
//some code
}

③JSコード
$(function() {
$(‘#testBtn’).on(‘click’, function() {
$(this).toggleClass(‘testAA testBB’);
});
});

「jQuery入門」.keypress()でテキストボックスの変更を検知するサンプル

JSコード
<script type=”text/javascript”>
aa=0;
$(document).ready(function(){
$(“input”).keypress(function(){
$(“span”).text(aa+=1);
});
});
</script>
</head>
<body>
名前: <input type=”text” />
<p>計算:<span>0</span></p>
</body>

「jQuery入門」scrollTop()でスクロール位置取得サンプルコード

1.JSコード
<script type=”text/javascript”>
$(document).ready(function(){
$(“.btnAA”).click(function(){
$(“div”).scrollTop(120);
});
$(“.btnBB”).click(function(){
alert($(“div”).scrollTop()+” px”);
});
});
</script>

2.htmlコード
<div style=”border:1px solid black;width:200px;height:200px;overflow:auto”>
テストデータ
</div>
<button class=”btnAA”>テストA</button>
<br />
<button class=”btnBB”>テストB</button>
</body>
</html>

「jQuery入門」.find()、.next()と.parents()の使い方

1.子要素の指定– .find()
<div class=”abc”>
<div class=”a11″>
<div class=”a12″>
<p>test data122</p>
</div>
</div>
</div>

$(‘.abc’).find(‘p’);

2.兄弟要素の指定– .next()
htmlコード
<ul>
<li>21</li>
<li>22</li>
<li class=”def”></li>
<li>23</li>
</ul>

JSコード
$(‘.def’).next();

3.親要素の指定– .parents()
htmlコード
<div>
<p>
<span>122333</span>
</p>
</div>
JSコード
$(‘span’).parents(‘div’);

4.thisの親要素や子要素の指定
$(this).parent();
$(this).children(‘p’);

「jQuery入門」before(), after(), prepend(), append()の使い方

1.htmlコード
<div id=”jstest”>要素挿入テスト</div>

2.JSコード
$(function(){
$(‘#jstest’)
.before(‘<div>11</div>’)
.after(‘<div>22</div>’)
.prepend(‘<p>33</p>’)
.append(‘<p>44</p>’);
});
3.実行結果
<div>11</div>
<div id=”jstest”>
<p>33</p>
要素挿入テスト
<p>44</p>
<div>22</div>

「jQuery入門」propでチェックボックスを全選択、全解除する

1.htmlコード
<div class=”cftAll”>
<input type=”checkbox” id=”cftAllPA”><label for=”cftAllPA”>全選択・全解除</label>
</div>
<div>
<input type=”checkbox” id=”chkAA”><label for=”chkAA”>項目PA</label>
<input type=”checkbox” id=”chkBB”><label for=”chkBB”>項目PB</label>
</div>

2.JSコード
$(‘.cftAll input,.cftAll label’).click(function(){
var elements = $(this).closest(‘.cftAll’).next().find(‘input’);
if($(this).is(‘:checked’)) {
$(elements).prop(‘checked’, true);
} else {
$(elements).prop(‘checked’, false);
}
});