見出し画像

20231122memo

369 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="description" content="t">
<title>Demo</title>
</head>
<body>
<input type="text" id="search"> <input type="button" value="絞り込む" id="button"> <input type="button" value="すべて表示" id="button2">

<table id="result">
	<thead>
		<tr><th>曜日</th><th>酒類</th><th>備考</th></tr>
	</thead>
	<tbody>
		<tr><td>日曜日</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>月曜日</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>火曜日</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>水曜日</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>木曜日</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>金曜日</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>平日</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>休日</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>その他の日</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>特別な日</td><td>データ１</td><td>情報１</td></tr>
		<tr><td>思い出の日</td><td>データ１</td><td>情報１</td></tr>
	</tbody>
</table>

<script>
$(function(){
	$('#button').bind("click",function(){
		var re = new RegExp($('#search').val());
		$('#result tbody tr').each(function(){
			var txt = $(this).find("td:eq(0)").html();
			if(txt.match(re) != null){
				$(this).show();
			}else{
				$(this).hide();
			}
		});
	});

	$('#button2').bind("click",function(){
		$('#search').val('');
		$('#result tr').show();
	});
});
</script>
</body>
</html>

この記事が気に入ったらサポートをしてみませんか？