HTML CSS JavaScript

reCAPTCHA v3をさくっと入れる

2022年5月3日 Leave a comment

仮会員登録多すぎ問題仮会員登録多すぎる。仮会員登録から飛んでくるメールが多い。そのくせ、本会員登録は一切ない。恐らくはBotが何のためか分からないが、仮会員登録しているみたい。ということで、Google様のreCA… more →

WindowsでSassを使う

2022年4月2日 Leave a comment

Sassとは sassとはcssをもっと書きやすく管理しやすくしてくれるやつです。詳しくは様々な情報があるのでここは割愛します。で、前々はSassはRubyで動作していました。これをRuby Sass といいますが、2… more →

JavaScriptのイベントバブリングを視る。

2017年2月6日 Leave a comment

WebでJavaScriptを触っていると、イベントのバブリングという言葉に触れることがある。ざっくり説明すると、子要素で発生したイベントが親要素、その上の親要素と親のほうに(先祖要素)に伝達していく様子が、深海で出来… more →

ざっくりviewport

2017年1月18日 Leave a comment

スマートフォンサイトを作る際に避けて通れないのがmetaタグのviewport。適当に書いてたけど、ざっくり理解した。 viewportとは viewportは、スマートフォンやタブレット端末で、デバイスのサイズより大… more →

JavaScriptで日付と時間の操作はMoment.js

2016年11月29日 2 Comments

JavaScriptで10日後を求めるときの計算が、以下の様な感じだった時に嫌悪感を覚えた方は何人いるだろうか。

var dt = new Date();
dt.setDate(dt.getDate() + 10);

1 2	var dt = new Date(); dt.setDate(dt.getDate() + 10);

インストール CDNにあったのでそのまま… more →

VisualStudio2015でSassを使う。

2016年6月21日 Leave a comment

Visual Studio 2015でSassファイルがサポートされた。 Sassとはなんぞや。詳しい情報は巷に結構あるので今回は割愛するが、簡単な例を出すと、以下のstyle.scssは、 [crayon-6420… more →

テーブルの行()をクリックでinputをチェック

2015年9月30日 Leave a comment

テーブルで、行をクリックさせたら先頭のinputタグをチェックさせるような要望がちょこちょこあるので、備忘録。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>trタグクリックでinputをチェック</title>
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	</head>
	<body>
		<div class="container">
			<h1>テーブルの行をクリックでinputをチェックさせる</h1>
			<table class="table table-bordered">
				<tr> <td><input type="radio" name="rdo" value="a"></td> <td>これはaです</td> <td>DummyA</td></tr>
				<tr> <td><input type="radio" name="rdo" value="b"></td> <td>これはbです</td> <td>DummyB</td></tr>
				<tr> <td><input type="radio" name="rdo" value="c"></td> <td>これはcです</td> <td>DummyC</td></tr>
				<tr> <td><input type="radio" name="rdo" value="d"></td> <td>これはdです</td> <td>DummyD</td></tr>
			</table>
		</div>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript">
		$(function(){
			var $trList = $("tr:has(input)");					//trでinputタグをもつものを取得
			$trList.each(function() {							//取得したtrタグそれぞれに処理を行う
			    var $input = $(this).find("input");				//trからinputタグを取得しておく。
				$(this).click(function(){
					$input.prop('checked',true);
			    });
			});
		});
		</script>

	</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>trタグクリックでinputをチェック</title>

</head>

<body>

<h1>テーブルの行をクリックでinputをチェックさせる</h1>

<tr> <td><input type="radio" name="rdo" value="a"></td> <td>これはaです</td> <td>DummyA</td></tr>

<tr> <td><input type="radio" name="rdo" value="b"></td> <td>これはbです</td> <td>DummyB</td></tr>

<tr> <td><input type="radio" name="rdo" value="c"></td> <td>これはcです</td> <td>DummyC</td></tr>

<tr> <td><input type="radio" name="rdo" value="d"></td> <td>これはdです</td> <td>DummyD</td></tr>

</table>

</div>

$(function(){

var $trList = $("tr:has(input)"); //trでinputタグをもつものを取得

$trList.each(function() { //取得したtrタグそれぞれに処理を行う

var $input = $(this).find("input"); //trからinputタグを取得しておく。

$(this).click(function(){

$input.prop('checked',true);

});

</script>

</body>

</html>