カテゴリー: JavaScript

カテゴリー
JavaScript

jQuaryでページ読み込み時にinputのイベントを発生させる

タイトルが変な感じだが、inputのvalueの長さでイベントを発生させたいのだが、ページ読み込み時に発生させることができなかったので、どうしようという案件。

どうも画像を読み込んだ時にはonloadイベント発生するが、タグがレンダリングされる時には、onloadイベントは発生しないようだ。なので、ページ読み込み時に$letterpackElements.each(function(){$(this).keyup();でkeyupイベントを発生させることで、.onの以降の処理も連動して（？）発生させることができた。よかった。実はパイセンが書いてくれたので、私はあまりよくわかっていない。

<script>
$(function(){
var $letterpackElements = $("[id^=letterpack_]");

$letterpackElements.on('keyup',function(){
var letterpack_num = ($(this).val());
if(letterpack_num.length > 10 && letterpack_num.length < 14){
var url='https://xxx/search/?requestNo1='+letterpack_num+'&locale=ja';
$(this).next('a').attr('href',url);
$(this).next('a').html("リンク表示");
}else{
$(this).next('a').attr('href','');
$(this).next('a').html("");
}
});
$letterpackElements.each(function(){
$(this).keyup();
});
});
</script>

カテゴリー
JavaScript

同じclass場合rowspanで列を結合するjQuery

テーブルの列で、同じclassの番号の場合、rowspanで結合するjQuery。配列に入れたcate-xxをfindして、番号込で同じ数値の時は結合する。

こちらのサイトを参考にしました。ありがとうございます。
http://study-upup.blogspot.com/2014/03/jqueryjquery.html

<table id="testTable-1">

<tr>
<td class="cate01-894">test</td>
<td class="cate02-894">user</td>
<td class="cate03-894">test</td>
<td class="cate04-894">完了</td>
</tr>

<tr>
<td class="cate01-894">test</td>
<td class="cate02-894">user</td>
<td class="cate03-894">test</td>
<td class="cate04-894">完了</td>
</tr>

</table>

<script>
var arr = ['cate01','cate02','cate03','cate04'];
var num = 0;
$.each(arr, function(i, value){
var cate = arr[num];
$(document).ready(function(){
$('#testTable-1').each(function () {
var pre_element = null;
var col_num = 0;
$(this).find('tr').each(function () {
var now_td = $(this).find('td[class^='+cate+']').eq( col_num );
if (pre_element == null) {
pre_element = now_td;
} else if (now_td.attr('class') == pre_element.attr('class')) {
now_td.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_td;
}
});
});
});
num++;
})
</script>

 

カテゴリー
JavaScript

【JavaScript】formの日付を自動入力

入力フォームに「申請日」という項目があり、自動入力するようになっていればいいんじゃね？
ということで、以下サンプルです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>

<form>
<input type="text" name="today" value="ここに日付">
</form>

<script>
(function() {
var myDate = new Date();
var Year = myDate.getFullYear();
var Month = myDate.getMonth() + 1;
var Day = myDate.getDate();
if ( Day < 10 ) Day = "0" + Day;
document.forms[0].elements["today"].value = Year + "-" + Month + "-" + Day;
})()
</script>

</body>
</html>

表示させたいinputのname値を環境にあわせて変更すればOKです。