array.reduce
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
配列の要素を単一の値にする
reduce:減らす
let arrayData = [1,2,3,4]
arrayData.reduce((result,data)=>{
return result+data
},resultの初期値)
// 10
let arrayData = [{id:1,name:"xxx"},{id:2,name:"yyy"},{id:3,name:"ZZZ"}]
arrayData.reduce((result,{id,name})=>{
if (id != 1){
result[id] = name
}
return result
},{})
// {2:"YYY",3:"ZZZ"}
tablesorterとfixed_midashiを組み合わせて使う
※制約的に問題ないならUI系のフレームワークを使った方が手っ取り早いですが、
tablesorter/fixed_midashi自体は結構便利。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/mod_tablesorter.css">
<style>
.tbl {
white-space: nowrap;
padding: 0;
margin: 0;
}
div.scroll_div {
overflow: auto;
}
</style>
</head>
<body>
<div class="scroll_div">
<table id="mytbl" class="tbl tablesorter" _fixedhead="rows:1; cols:0">
<thead>
<tr>
<th>AAAA</th>
<th>BBBB</th>
<th>CCCC</th>
<th>DDDD</th>
<th>EEEE</th>
<th>FFFF</th>
<th>GGGG</th>
<th>HHHH</th>
<th>IIII</th>
</tr>
</thead>
<tbody>
<tr>
<td>XXXX</td>
<td>XXXX</td>
<td>1</td>
<td>XXXX</td>
<td>XXXX</td>
<td>XXXX</td>
<td>XXXX</td>
<td>XXXX</td>
<td>XXXX</td>
</tr>
<tr>
<td>XXXX</td>
<td>XXXX</td>
<td>2</td>
<td>XXXX</td>
<td>XXXX</td>
<td>XXXX</td>
<td>XXXX</td>
<td>XXXX</td>
<td>XXXX</td>
</tr>
...
</tbody>
</table>
</div>
<script src="/jquery-3.2.1.min.js"></script>
<script src="/jquery.tablesorter.js"></script>
<script src="/fixed_midashi.js"></script>
<script>
// ※tablesorterの後にFixedMidashiを適用すること!!
// -> そうしないとFixedMidashiが作成するダミーヘッダにtablesoterが行った設定が
// 正しく適用されない場合があるため
$("#mytbl").tablesorter()
FixedMidashi.create()
{
// オリジナルの見出しのclick/mousedownを呼び出す
var h = $("#mytbl th.header")
$(h).each(function (index, element) {
if (FixedMidashi.isFixedElement(element)) {
$(element).click(function () {
var original = FixedMidashi.getSourceElement(this)
$(original).click()
})
$(element).mousedown(function () {
var original = FixedMidashi.getSourceElement(this)
$(original).mousedown()
})
}
})
// 定期的にスタイルを同期させる
setInterval(function () {
$(h).each(function (index, element) {
if (FixedMidashi.isFixedElement(element)) {
original = FixedMidashi.getSourceElement(element)
if ($(original).hasClass("headerSortUp")) {
$(element).addClass("headerSortUp")
$(element).removeClass("headerSortDown")
}
else if ($(original).hasClass("headerSortDown")) {
$(element).addClass("headerSortDown")
$(element).removeClass("headerSortUp")
}
else {
$(element).removeClass("headerSortUp")
$(element).removeClass("headerSortDown")
}
}
})
}, 100)
}
</script>
</body>
</html>
mediaタグを使用したレスポンシブ対応を行う際の留意点
viewportを設定する。
※scaleは1.0にする。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
レスポンシブ対応のメニュー
// CSS
@media screen and (min-width: 481px) {
html,
body {
width: 100%;
}
header {
width: max-content;
}
header ul {
padding: 0;
}
header li {
display: inline-block;
color: blue;
cursor:pointer;
}
header li:after {
content: '|';
color: black;
padding-left: 1em;
padding-right: 1em;
cursor:auto;
}
header li:last-child:after {
content: '';
cursor:auto;
}
#header_input,
#header_open,
#header_close{
display: none;
}
}
@media screen and (max-width:480px) {
html {
width: 350px;
}
body{
width: 100%;
}
h1 {
font-size: 1.2rem;
}
h2 {
font-size: 1.1rem;
}
h3 {
font-size: 1.0rem;
}
.hide {
display: none;
}
/*
ヘッダー
*/
header {
height: 30px;
}
/* アイコンのスペース */
#header_open {
display: inline-block;
height: 30px;
vertical-align: middle;
color: blue;
cursor:pointer;
font-size: 1.5em;
}
/* 閉じる用のオーバーレイ */
#header_close {
display: none;
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000000;
opacity: 0;
}
/* メニュー */
#header_content {
display: none;
overflow: auto;
position: fixed;
top: 0;
left: 0;
z-index: 200;
width: 250px;
height: 100%;
list-style: none;
padding-top: 1rem;
padding-left: 1rem;
font-size: 1.2em;
background: linear-gradient(#fffee4, #feffe0);
margin: 0;
}
#header_content li {
height: 3em;
cursor: pointer;
padding: 0.5em;
margin-bottom: 10px;
box-shadow: 15px 5px 2px 2px #747474;
background: linear-gradient(#c3e3ff, #b4d6ff);
font-weight: bold;
color: #f6ffed;
text-shadow: 0 0 1px #000;
}
/* OPENされた時 */
#header_input:checked ~ #header_close {
display:block;
opacity: 0.7;
}
#header_input:checked ~ #header_content {
display: block;
}
}
// html
<html>
<head>
...
</head>
<body>
...
<nav>
<header>
<input id="header_input" type="checkbox" class="hide">
<label id="header_open" for="header_input"><span>メニュー▼</span></label>
<label id="header_close" for="header_input" class="hide"></label>
<ul id="header_content">
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
</ul>
</header>
</nav>
...
</body>