テーブルをプルダウンに合わせて表示切替し、尚且つ、表示されたテーブルを並び替えたいです。
テーブルをプルダウンに合わせて表示切替し、尚且つ、表示されたテーブルを並び替えたいです。
まず、以下のjavascript文で表示の切り替えに成功しました。
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script id="rendered-js" >
$('select').change(function () {
var val = $('select option:selected').val();
if (val == 'select') return;
$('tr').fadeOut();
$('tr#' + val).fadeIn();
});
//# sourceURL=pen.js
</script>
しかし、１段目のtrタグでdisplay:inline;をやっても表示されず、
それがゆえに、並び替えができません。
どうしたらいいでしょうか。
僕が参考にしたのは主にこの２つです。
https://homemadegarbage.com/selectbox-show
https://konoti.com/website/javascript/table-sort.html
以下はhtmlとjavascript文です。
<html>
<head>
<title>simplePaginationのサンプルデモ</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--一時的に対応。コンテンツが増えたら削除予定-->
<meta name="robots" content="noindex">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.2/js/jquery.tablesorter.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.2/css/theme.default.min.css">
<link rel= "stylesheet" href="pageStyle.css">
</head>
<body>
<script type="text/javascript">
$(document).ready(function()
{
$("#testTbl").tablesorter();
}
);
</script>
</body>
</html>
<hr>
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" />
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
<title>CodePen - A Pen by HomeMadeGarbage</title>
<link rel="canonical" href="https://codepen.io/hmg/pen/ZMKLJj">
<style>
div {
position: absolute;
display: none;
}
/* 表示スタイル（動作に無関係） */
div {
margin-top: 3rem;
border: 1px solid #ccc;
padding: 3rem;
width: 100%;
box-sizing: border-box;
}
#a01 {
background: #D8DBE2;
}
#a02 {
background: #A9BCD0;
}
#a03 {
background: #58A4B0;
}
</style>
</head>
<!--<body translate="no">
<select>
<option value="select">選択してください</option>
<option value="a01">要素1</option>
<option value="a02">要素2</option>
<option value="a03">要素3</option>
</select>
<table>
<tr><td><div id="a01"><tr><td>
要素1
</tr></td></div><td><tr>
<tr><td><div id="a02"><tr><td>
要素2
</tr></td></div><td><tr>
<tr><td><div id="a03"><tr><td>
要素3
</tr></td></div><td><tr></table>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script id="rendered-js" >
$('select').change(function () {
var val = $('select option:selected').val();
if (val == 'select') return;
$('div').fadeOut();
$('div#' + val).fadeIn();
});
//# sourceURL=pen.js
</script>
<script src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js"></script>
</body>
</html>-->
<body translate="no">
<select>
<option value="select">選択してください</option>
<option value="semboku">泉北高速鉄道</option>
<option value="a011">要素1</option>
<option value="a012">要素2</option>
<option value="a013">要素3</option>
</select>
<table id="testTbl" class="tablesorter" border="1" style="width: 125px;">
<thead><tr style="display: table-row;"><td rowspan="1" colspan="1">名前</td><td>点数</td><td>点数</td></tr></thead>
<tbody>
<tr id="semboku" style="display:none;"><td>中百舌鳥</td><td>なかもず</td><td>ナカモ</td></tr>
<tr id="semboku" style="display:none;"><td>深井</td><td>ふかい</td><td>フカ</td></tr>
<tr id="semboku" style="display:none;"><td>泉ケ丘</td><td>いずみがおか</td><td>イズミ</td></tr>
</tbody>
<tr id="a011" style="display:none;"><td>
要素1
</td></tr>
<tr id="a012" style="display:none;"><td>
要素2
</td></tr>
<tr id="a013" style="display:none;"><td>
要素3
</td></tr></table>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script id="rendered-js" >
$('select').change(function () {
var val = $('select option:selected').val();
if (val == 'select') return;
$('tr').fadeOut();
$('tr#' + val).fadeIn();
});
//# sourceURL=pen.js
</script>
</body>
</html>
0
