「javascript/npsort」の編集履歴（バックアップ）一覧はこちら

javascript/npsort - (2022/02/10 (木) 16:03:16) の１つ前との変更点

追加された行は緑色になります。

削除された行は赤色になります。

#html2(){{{{{
<div style="display: none;" id="npsort-inlinestyles"><!--
.npsort thead,
.npsort_cmd thead {
  background: #ccc;
  font-weight: bold;
}

.npsort_cmd tbody tr:nth-child(odd) {
  background: #f0f0f0;
}

.headbtn {
  cursor : pointer;
}

.headbtn:hover {
  background : #ffd700;
}

.abq.order_0,
.abq.order_1 {
  background : #def;
}
.abq.order_2,
.abq.order_3 {
  background : #fcc;
}
.abq.order_4,
.abq.order_5 {
  background : #cfb;
}

.order_0:after,
.order_2:after,
.order_4:after {
  content: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}
.order_1:after,
.order_3:after,
.order_5:after {
  content: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}

.ex[class*="order_"],
.noble[class*="order_"],
.name[class*="order_"],
.class[class*="order_"] {
  background : #fff;
}

.npsort-checkbox-label,
.npsort-styles input[type=radio] + label {
  background-color: #e0e0e0;
  background-image: -webkit-linear-gradient(top, #f9f9f9, #e0e0e0);
  background-image: -moz-linear-gradient(top, #f9f9f9, #e0e0e0);
  background-image: -o-linear-gradient(top, #f9f9f9, #e0e0e0);
  background-image: -ms-linear-gradient(top, #f9f9f9, #e0e0e0);
  background-image: linear-gradient(to bottom, #f9f9f9, #e0e0e0);
}

.npsort-checkbox-label:active,
.npsort-styles input[type=radio] + label:active {
  background-color: #f9f9f9;
  background-image: -webkit-linear-gradient(top, #e0e0e0, #f9f9f9);
  background-image: -moz-linear-gradient(top, #e0e0e0, #f9f9f9);
  background-image: -o-linear-gradient(top, #e0e0e0, #f9f9f9);
  background-image: -ms-linear-gradient(top, #e0e0e0, #f9f9f9);
  background-image: linear-gradient(to bottom, #e0e0e0, #f9f9f9);
}
.npsort-checkbox:checked + .npsort-checkbox-label:active {
  background: #26A;
}

.npsort-checkbox-label {
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
  font-size:14px;
  text-align:center;
  color: black;
  padding: 4px 18px 4px 12px;
  margin-bottom: 5px;
  border: 1px solid #afafaf;
  border-radius: 5px;
  -ms-user-select: none; /* IE 10+ */
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
}
.npsort-checkbox-label::before {
  content: "";
  float: left;
  display: block;
  width: 16px;
  height: 16px;
  padding-right: 5px;
  background: url('//www9.atwiki.jp/f_go?cmd=upload&act=open&pageid=2993&file=tick-unchecked.png') no-repeat left 2px / contain;
}
.npsort-checkbox {
  display: none;
}
.npsort-checkbox:checked + .npsort-checkbox-label,
.npsort-styles input[type=radio]:checked + label {
  background: #148;
  background-image: none;
  color: white;
}
.npsort-checkbox:checked + .npsort-checkbox-label::before {
  background: url('//www9.atwiki.jp/f_go?cmd=upload&act=open&pageid=2993&file=tick-checked.png') no-repeat left 1px / contain;
}

.npsort tbody > tr:nth-of-type(3n-2) td:nth-child(3n+10)[rowspan] {
  background-color: #EFEFEF;
}
.npsort tbody > tr:nth-of-type(3n-2) td:nth-child(n+5):not([rowspan]) {
  background-color: #DDEEFF;
}
.npsort tbody > tr:nth-of-type(3n-1) {
  background-color: #FFCCCC;
}
.npsort tbody > tr:nth-of-type(3n) {
  background-color: #CCFFBB;
}
--></div>
<div id="npfilter" style="display:none;">
  <h3>フィルター</h3>
  <div>
    <input type="checkbox" name="rarity0" class="npsort-checkbox npsort-rarity" id="npsort-rarity0" data-regex="0" checked></input>
    <label for="npsort-rarity0" class="npsort-checkbox-label">★0</label>
    <input type="checkbox" name="rarity1" class="npsort-checkbox npsort-rarity" id="npsort-rarity1" data-regex="1" checked></input>
    <label for="npsort-rarity1" class="npsort-checkbox-label">★1</label>
    <input type="checkbox" name="rarity2" class="npsort-checkbox npsort-rarity" id="npsort-rarity2" data-regex="2" checked></input>
    <label for="npsort-rarity2" class="npsort-checkbox-label">★2</label>
    <input type="checkbox" name="rarity3" class="npsort-checkbox npsort-rarity" id="npsort-rarity3" data-regex="3" checked></input>
    <label for="npsort-rarity3" class="npsort-checkbox-label">★3</label>
    <input type="checkbox" name="rarity4" class="npsort-checkbox npsort-rarity" id="npsort-rarity4" data-regex="4" checked></input>
    <label for="npsort-rarity4" class="npsort-checkbox-label">★4</label>
    <input type="checkbox" name="rarity5" class="npsort-checkbox npsort-rarity" id="npsort-rarity5" data-regex="5" checked></input>
    <label for="npsort-rarity5" class="npsort-checkbox-label">★5</label>
  </div>
  <div>
    <input type="checkbox" name="c1" class="npsort-checkbox npsort-class" id="npsort-c1" data-regex="剣" checked></input>
    <label for="npsort-c1" class="npsort-checkbox-label">剣</label>
    <input type="checkbox" name="c2" class="npsort-checkbox npsort-class" id="npsort-c2" data-regex="弓" checked></input>
    <label for="npsort-c2" class="npsort-checkbox-label">弓</label>
    <input type="checkbox" name="c3" class="npsort-checkbox npsort-class" id="npsort-c3" data-regex="槍" checked></input>
    <label for="npsort-c3" class="npsort-checkbox-label">槍</label>
    <input type="checkbox" name="c4" class="npsort-checkbox npsort-class" id="npsort-c4" data-regex="騎" checked></input>
    <label for="npsort-c4" class="npsort-checkbox-label">騎</label>
    <input type="checkbox" name="c5" class="npsort-checkbox npsort-class" id="npsort-c5" data-regex="術" checked></input>
    <label for="npsort-c5" class="npsort-checkbox-label">術</label>
    <input type="checkbox" name="c6" class="npsort-checkbox npsort-class" id="npsort-c6" data-regex="殺" checked></input>
    <label for="npsort-c6" class="npsort-checkbox-label">殺</label>
    <input type="checkbox" name="c7" class="npsort-checkbox npsort-class" id="npsort-c7" data-regex="狂" checked></input>
    <label for="npsort-c7" class="npsort-checkbox-label">狂</label>
    <br>
    <input type="checkbox" name="c8" class="npsort-checkbox npsort-class" id="npsort-c8" data-regex="盾" checked></input>
    <label for="npsort-c8" class="npsort-checkbox-label">盾</label>
    <input type="checkbox" name="c9" class="npsort-checkbox npsort-class" id="npsort-c9" data-regex="裁" checked></input>
    <label for="npsort-c9" class="npsort-checkbox-label">裁</label>
    <input type="checkbox" name="c10" class="npsort-checkbox npsort-class" id="npsort-c10" data-regex="讐" checked></input>
    <label for="npsort-c10" class="npsort-checkbox-label">讐</label>
    <input type="checkbox" name="c11" class="npsort-checkbox npsort-class" id="npsort-c11" data-regex="月" checked></input>
    <label for="npsort-c11" class="npsort-checkbox-label">月</label>
    <input type="checkbox" name="c12" class="npsort-checkbox npsort-class" id="npsort-c12" data-regex="分" checked></input>
    <label for="npsort-c12" class="npsort-checkbox-label">分</label>
    <input type="checkbox" name="c13" class="npsort-checkbox npsort-class" id="npsort-c13" data-regex="降" checked></input>
    <label for="npsort-c13" class="npsort-checkbox-label">降</label>
    <input type="checkbox" name="c14" class="npsort-checkbox npsort-class" id="npsort-c14" data-regex="詐" checked></input>
    <label for="npsort-c13" class="npsort-checkbox-label">詐</label>
    <input type="checkbox" name="call" class="npsort-checkbox npsort-class-all" id="npsort-call" data-regex="全" checked></input>
    <label for="npsort-call" class="npsort-checkbox-label">全</label>
  </div>
  <div>
    <input type="checkbox" name="t1" class="npsort-checkbox npsort-toggle" id="npsort-t1" data-regex="Yes" checked></input>
    <label for="npsort-t1" class="npsort-checkbox-label">スキル使用する</label>
    <input type="checkbox" name="t2" class="npsort-checkbox npsort-toggle" id="npsort-t2" data-regex="No" checked></input>
    <label for="npsort-t2" class="npsort-checkbox-label">スキル使用しない</label>
  </div>
</div>
}}}}}
#js(){{{{{
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  // このJS用のCSSを追加
  for (var i = 0, root = document.getElementById('npsort-inlinestyles'), nodes = root.childNodes; i < nodes.length; i++) {
    if (nodes[i].nodeType === document.COMMENT_NODE) {
      var elem = document.createElement('style');
      elem.type = 'text/css';
      elem.setAttribute('media', 'screen');
      if (elem.styleSheet) elem.styleSheet.cssText = nodes[i].data;
      else elem.appendChild(document.createTextNode(nodes[i].data));
      document.getElementsByTagName('head').item(0).appendChild(elem);
      root.parentNode.removeChild(root);
      break;
    }
  }

  // NPソートテーブルがなければ処理しない
  const tTable = $('.npsort table, .npsort_cmd table');
  if (tTable.length !== 1) return;

  const isCommandPage = $('.npsort_cmd').length != 0;

  // 現在のソート状態
  let curSortElem = null;

  // 現在表示中のHTML
  let displayHtml = '';
  // 描画予定のHTML
  let delayList = [];
  // 表最下部の位置
  let tableBottom = 0;

  // ソート機能を付けるカラムに振る舞いを決めるCSS名を設定
  const hCols = $('thead td', tTable);
  const bRows = $('tbody tr', tTable);
  const cacheRows = [];

  if (isCommandPage) {
    // NP獲得効率(コマンド合計)用
    hCols[0].className = 'headbtn ex col_0';
    hCols[1].className = 'headbtn name col_1';
    hCols[2].className = 'headbtn toggle col_2';
    hCols[3].className = 'headbtn class col_3';
    hCols[4].className = 'headbtn ex col_4';
    hCols[5].className = 'headbtn ex col_5';
    hCols[6].className = 'headbtn ex col_6';
    hCols[7].className = 'headbtn ex col_7';
    hCols[11].className = 'headbtn name col_8';
    hCols[12].className = 'headbtn ex col_9';
    hCols[13].className = 'headbtn name col_10';
    hCols[14].className = 'headbtn ex col_11';

    // 表キャッシュ
    for (let i = 0; i < bRows.length; i++) {
      let cache = {};
      const r0 = bRows[i];
      cache.html = r0.outerHTML; // キャッシュ
      cache.html2 = cache.html.split('<tr>').join('<tr style="display:none;">'); // キャッシュ(非表示時)
      // 並べ替え用の比較データ
      cache.data = [];
      cache.data[0] = [r0.cells[0].innerText];
      cache.data[1] = r0.cells[1].innerText;
      cache.data[2] = r0.cells[2].innerText;
      cache.data[3] = r0.cells[3].innerText;
      cache.data[4] = [r0.cells[4].innerText];
      cache.data[5] = [r0.cells[5].innerText];
      cache.data[6] = [r0.cells[6].innerText];
      cache.data[7] = [r0.cells[7].innerText];
      cache.data[8] = r0.cells[8].innerText;
      cache.data[9] = [r0.cells[9].innerText];
      cache.data[10] = r0.cells[10].innerText;
      cache.data[11] = [r0.cells[11].innerText];
      cache.useSkillColumn = cache.data[2].length > 1 ? 2 : 1;
      cache.classColumn = cache.data[3]; // フィルターに使うクラス列は共通の変数に置く   
      cache.enabled = true; // 表示状態
      cacheRows.push(cache);
    }
  } else {
    // NP獲得効率用
    hCols[0].className = 'headbtn ex col_0';
    hCols[1].className = 'headbtn name col_1';
    hCols[2].className = 'headbtn toggle col_2';
    hCols[3].className = 'headbtn class col_3';
    hCols[6].className = 'headbtn abq col_6';
    hCols[9].className = 'headbtn noble col_13';
    hCols[11].className = 'headbtn abq col_7';
    hCols[12].className = 'headbtn abq col_8';
    hCols[13].className = 'headbtn ex col_9';
    hCols[14].className = 'headbtn abq col_10';
    hCols[15].className = 'headbtn abq col_11';
    hCols[16].className = 'headbtn ex col_12';

    for (let i = 0; i < bRows.length; i+=3) {
      let cache = {};
      let idx = i;
      const r0 = bRows[idx], r1 = bRows[idx+1], r2 = bRows[idx+2];
      cache.html = r0.outerHTML+r1.outerHTML+r2.outerHTML;
      cache.html2 = cache.html.split('<tr>').join('<tr style="display:none;">');
      cache.data = [];
      cache.data[0] = [r0.cells[0].innerText];
      cache.data[1] = r0.cells[1].innerText;
      cache.data[2] = r0.cells[2].innerText;
      cache.data[3] = r0.cells[3].innerText;
      idx = 6; cache.data[idx] = [r0.cells[idx].innerText, r1.cells[idx-4].innerText, r2.cells[idx-4].innerText];
      idx = 7; cache.data[idx] = [r0.cells[idx].innerText, r1.cells[idx-4].innerText, r2.cells[idx-4].innerText];
      idx = 8; cache.data[idx] = [r0.cells[idx].innerText, r1.cells[idx-4].innerText, r2.cells[idx-4].innerText];
      cache.data[9] = [r0.cells[9].innerText];
      idx = 10; cache.data[idx] = [r0.cells[idx].innerText, r1.cells[idx-5].innerText, r2.cells[idx-5].innerText];
      idx = 11; cache.data[idx] = [r0.cells[idx].innerText, r1.cells[idx-5].innerText, r2.cells[idx-5].innerText];
      cache.data[12] = [r0.cells[12].innerText];
      // 宝具リチャージの値データはNP500の時の値(最後の行)で比較
      cache.data[13] = [r0.cells[13].innerText.split('\n').slice(-1)];
      cache.classColumn = cache.data[3];
      cache.useSkillColumn = cache.data[2].length > 1 ? 2 : 1;
      cache.enabled = true;
      cacheRows.push(cache);
    }
  }

  const crLength = cacheRows.length;

  // 3行区切りに表から対応する位置のセルの値を取得する
  const getFloats = function(row, col) {
    let items = [];
    for (let i = 0; i < crLength; i++) {
      let num = parseFloat(cacheRows[i].data[col][row])
      if (isNaN(num)) {
        items.push(0);
      } else {
        items.push(num);
      }
    }
    return items;
  };

  // 表から対応する位置のセルの文字列を取得する
  const getStrings = function(col) {
    let items = [];
    for (let i = 0; i < crLength; i++) {
      let text = cacheRows[i].data[col];
      if (text)
        items.push(text);
      else
        items.push('');
    }
    return items;
  }

  // ソート用関数
  const sortNumA = function(a, b) {
    return a - b;
  };
  const sortNumD = function(a, b) {
    return b - a;
  };
  const sortStrA = function(a, b) {
    a = a.toString().toLowerCase();
    b = b.toString().toLowerCase();
    if (a < b) return -1;
    else if (a > b) return 1;
    return 0;
  };
  const sortStrD = function(a, b) {
    a = a.toString().toLowerCase();
    b = b.toString().toLowerCase();
    if (b < a) return -1;
    else if (b > a) return 1;
    return 0;
  };

  // 100行だけ描画する
  const paintRows = function(force) {
    if (!force && delayList.length < 1) {
      tableBottom = 0;
      return;
    }
    for (let i = 0; i < 100; i++) {
      if (delayList.length < 1) {
        break;
      }
      displayHtml += delayList.shift();
    }
    $('tbody', tTable).html(displayHtml);
    tableBottom = tTable.height() + tTable.offset().top;
  };

  // フィルタリングとソート状態に基づいて表を組み換えする
  const tSortClickInternal = function(increment) {   
    let sortType, column, orderType;
    if (curSortElem) {
      let m = curSortElem.className.match(/(noble|name|class|abq|ex|toggle) col_(\d+)/i);
      // ソートの振る舞い
      sortType = m[1];
      // 比較するデータがある列番号
      column = parseInt(m[2]);
      let m2 = curSortElem.className.match(/order_(\d)/i);
      // 現在の並べ替え状態を一つ進める
      orderType = m2 ? parseInt(m2[1]) : -1;
      if (increment) {
        if (orderType >= 5) orderType = 0; else orderType++;
      }
      curSortElem.className = 'headbtn ' +sortType+' col_'+column.toString()+' order_'+orderType.toString();
    }

   
    let srcList = [];  // 並べ替える前の値データ
    let sortList = []; // ソートした値データ
    let moveRow = []; // ソートしたcacheRowsのインデックス

    if (sortType == null) {
      // 無ソートならそのまま
      for (let i = 0; i < crLength; i++) moveRow[i] = i;
    } else {
      if (sortType === 'abq') {
        // ABQソートは値データが3列に跨るソート(orderType 0～5)
        // row=0 ARTS asc ARTS desc
        // row=1 BUSTER asc, BUSTER desc
        // row=2 QUICK asc, QUICK desc
        let row = 0;
        if (orderType >= 2) row++;
        if (orderType >= 4) row++;
        srcList = getFloats(row, column);
        sortList = srcList.slice(0, srcList.length);
        if (orderType % 2 !== 0) sortList.sort(sortNumD);
        else sortList.sort(sortNumA);
      }
      else if (sortType === 'ex' || sortType === 'noble') {
        // 1列の数値ソート
        srcList = getFloats(0, column);
        sortList = srcList.slice(0, srcList.length);
        if (orderType % 2 !== 0) sortList.sort(sortNumD);
        else sortList.sort(sortNumA);
      }
      else {
        // 文字列ソート
        srcList = getStrings(column);
        sortList = srcList.slice(0, srcList.length);
        if (orderType % 2 !== 0) sortList.sort(sortStrD);
        else sortList.sort(sortStrA);
      }

      // cacheRowsのソート後のインデックスを求める

      for (let i = 0, l = sortList.length, l2 = srcList.length; i < l; i++) {
        for (let j = 0; j < l2; j++) {
          if (srcList[j] != null && sortList[i] == srcList[j]) {
            moveRow[i] = j;
            srcList[j] = null;
            break;
          }
        }
      }
    }

    // 新順序の行HTMLをストックしてスクロール位置まで描画する
    displayHtml = '';
    delayList = [];

    for (let i = 0, j = 0, l=moveRow.length; i < l; i++) {
      const row = cacheRows[moveRow[i]];
      if (row.enabled) delayList[j++] = row.html;
    }
    paintRows(true);
  };

  // ソート状態を切り替える
  const tSortClick = function(e) {
    let m = this.className.match(/(noble|name|class|abq|ex|toggle) col_(\d+)/i);
    if (m) {
      if (curSortElem && curSortElem != this) {
        curSortElem.className = curSortElem.className.replace(/order_\d+/i, '');
      }
      curSortElem = this;
      tSortClickInternal(true);
    }
  };

  // チェック入りのレア度とクラスのみフィルター表示する
  const tFilterToggle = function(e) {
    let enableRarity = '';
    let enableClass = '';
    let enableToggle = 0;
    // 表示するレアリティを求める
    $('.npsort-rarity').each((i,el) => {
      if ($(el).prop('checked')) enableRarity += $(el).data('regex').toString();
    });
    // 表示するクラスを求める
    let count = 0;
    $('.npsort-class').each((i,el) => {
      if ($(el).prop('checked')) {
        enableClass += $(el).data('regex').toString();
        count++;
      }
    });
    $('.npsort-toggle').each((i,el) => {
      if ($(el).prop('checked')) {
        if ($(el).data('regex').toString() === 'Yes') enableToggle |= 2;
        else enableToggle |= 1;
      }
    });
    // クラスボタンが全チェックなら全クラスボタンをチェック状態にする
    if ($('.npsort-class').length == count) {
      $('.npsort-class-all').prop('checked', true);
    } else {
      $('.npsort-class-all').prop('checked', false);
    }
    // 表示状態を変更する
    const regex = new RegExp('['+enableClass+']['+enableRarity+']');
    for (let i = 0; i < crLength; i++) {
      cacheRows[i].enabled = false;
      if (regex.test(cacheRows[i].classColumn) && ((cacheRows[i].useSkillColumn & enableToggle) !== 0)) {
        cacheRows[i].enabled = true;
      }
    }
    tSortClickInternal(false);
  };

  // 全クラス一括チェックする
  const tFilterToggleAll = function(e) {
    let enabled = $(this).prop('checked');
    $('.npsort-class').prop('checked', enabled);
    tFilterToggle();
  };

  // エレメントにイベント登録
  tTable.on('click', '.headbtn', tSortClick);
  $('#npfilter').on('change', '.npsort-checkbox', tFilterToggle);
  $('.npsort-class-all').bind('change', tFilterToggleAll);
  $('#npfilter').css('display', 'block');
  $(window).scroll(function() {
    if (tableBottom > 0 
      && ($(document).scrollTop() + $(window).height()) > tableBottom) {
        paintRows();
      }
  });
});
</script>
}}}}}

#html2(){{{{{
<div style="display: none;" id="npsort-inlinestyles"><!--
.npsort thead,
.npsort_cmd thead {
  background: #ccc;
  font-weight: bold;
}

.npsort_cmd tbody tr:nth-child(odd) {
  background: #f0f0f0;
}

.headbtn {
  cursor : pointer;
}

.headbtn:hover {
  background : #ffd700;
}

.abq.order_0,
.abq.order_1 {
  background : #def;
}
.abq.order_2,
.abq.order_3 {
  background : #fcc;
}
.abq.order_4,
.abq.order_5 {
  background : #cfb;
}

.order_0:after,
.order_2:after,
.order_4:after {
  content: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7);
}
.order_1:after,
.order_3:after,
.order_5:after {
  content: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7);
}

.ex[class*="order_"],
.noble[class*="order_"],
.name[class*="order_"],
.class[class*="order_"] {
  background : #fff;
}

.npsort-checkbox-label,
.npsort-styles input[type=radio] + label {
  background-color: #e0e0e0;
  background-image: -webkit-linear-gradient(top, #f9f9f9, #e0e0e0);
  background-image: -moz-linear-gradient(top, #f9f9f9, #e0e0e0);
  background-image: -o-linear-gradient(top, #f9f9f9, #e0e0e0);
  background-image: -ms-linear-gradient(top, #f9f9f9, #e0e0e0);
  background-image: linear-gradient(to bottom, #f9f9f9, #e0e0e0);
}

.npsort-checkbox-label:active,
.npsort-styles input[type=radio] + label:active {
  background-color: #f9f9f9;
  background-image: -webkit-linear-gradient(top, #e0e0e0, #f9f9f9);
  background-image: -moz-linear-gradient(top, #e0e0e0, #f9f9f9);
  background-image: -o-linear-gradient(top, #e0e0e0, #f9f9f9);
  background-image: -ms-linear-gradient(top, #e0e0e0, #f9f9f9);
  background-image: linear-gradient(to bottom, #e0e0e0, #f9f9f9);
}
.npsort-checkbox:checked + .npsort-checkbox-label:active {
  background: #26A;
}

.npsort-checkbox-label {
  cursor: pointer;
  white-space: nowrap;
  display: inline-block;
  font-size:14px;
  text-align:center;
  color: black;
  padding: 4px 18px 4px 12px;
  margin-bottom: 5px;
  border: 1px solid #afafaf;
  border-radius: 5px;
  -ms-user-select: none; /* IE 10+ */
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
}
.npsort-checkbox-label::before {
  content: "";
  float: left;
  display: block;
  width: 16px;
  height: 16px;
  padding-right: 5px;
  background: url('//www9.atwiki.jp/f_go?cmd=upload&act=open&pageid=2993&file=tick-unchecked.png') no-repeat left 2px / contain;
}
.npsort-checkbox {
  display: none;
}
.npsort-checkbox:checked + .npsort-checkbox-label,
.npsort-styles input[type=radio]:checked + label {
  background: #148;
  background-image: none;
  color: white;
}
.npsort-checkbox:checked + .npsort-checkbox-label::before {
  background: url('//www9.atwiki.jp/f_go?cmd=upload&act=open&pageid=2993&file=tick-checked.png') no-repeat left 1px / contain;
}

.npsort tbody > tr:nth-of-type(3n-2) td:nth-child(3n+10)[rowspan] {
  background-color: #EFEFEF;
}
.npsort tbody > tr:nth-of-type(3n-2) td:nth-child(n+5):not([rowspan]) {
  background-color: #DDEEFF;
}
.npsort tbody > tr:nth-of-type(3n-1) {
  background-color: #FFCCCC;
}
.npsort tbody > tr:nth-of-type(3n) {
  background-color: #CCFFBB;
}
--></div>
<div id="npfilter" style="display:none;">
  <h3>フィルター</h3>
  <div>
    <input type="checkbox" name="rarity0" class="npsort-checkbox npsort-rarity" id="npsort-rarity0" data-regex="0" checked></input>
    <label for="npsort-rarity0" class="npsort-checkbox-label">★0</label>
    <input type="checkbox" name="rarity1" class="npsort-checkbox npsort-rarity" id="npsort-rarity1" data-regex="1" checked></input>
    <label for="npsort-rarity1" class="npsort-checkbox-label">★1</label>
    <input type="checkbox" name="rarity2" class="npsort-checkbox npsort-rarity" id="npsort-rarity2" data-regex="2" checked></input>
    <label for="npsort-rarity2" class="npsort-checkbox-label">★2</label>
    <input type="checkbox" name="rarity3" class="npsort-checkbox npsort-rarity" id="npsort-rarity3" data-regex="3" checked></input>
    <label for="npsort-rarity3" class="npsort-checkbox-label">★3</label>
    <input type="checkbox" name="rarity4" class="npsort-checkbox npsort-rarity" id="npsort-rarity4" data-regex="4" checked></input>
    <label for="npsort-rarity4" class="npsort-checkbox-label">★4</label>
    <input type="checkbox" name="rarity5" class="npsort-checkbox npsort-rarity" id="npsort-rarity5" data-regex="5" checked></input>
    <label for="npsort-rarity5" class="npsort-checkbox-label">★5</label>
  </div>
  <div>
    <input type="checkbox" name="c1" class="npsort-checkbox npsort-class" id="npsort-c1" data-regex="剣" checked></input>
    <label for="npsort-c1" class="npsort-checkbox-label">剣</label>
    <input type="checkbox" name="c2" class="npsort-checkbox npsort-class" id="npsort-c2" data-regex="弓" checked></input>
    <label for="npsort-c2" class="npsort-checkbox-label">弓</label>
    <input type="checkbox" name="c3" class="npsort-checkbox npsort-class" id="npsort-c3" data-regex="槍" checked></input>
    <label for="npsort-c3" class="npsort-checkbox-label">槍</label>
    <input type="checkbox" name="c4" class="npsort-checkbox npsort-class" id="npsort-c4" data-regex="騎" checked></input>
    <label for="npsort-c4" class="npsort-checkbox-label">騎</label>
    <input type="checkbox" name="c5" class="npsort-checkbox npsort-class" id="npsort-c5" data-regex="術" checked></input>
    <label for="npsort-c5" class="npsort-checkbox-label">術</label>
    <input type="checkbox" name="c6" class="npsort-checkbox npsort-class" id="npsort-c6" data-regex="殺" checked></input>
    <label for="npsort-c6" class="npsort-checkbox-label">殺</label>
    <input type="checkbox" name="c7" class="npsort-checkbox npsort-class" id="npsort-c7" data-regex="狂" checked></input>
    <label for="npsort-c7" class="npsort-checkbox-label">狂</label>
    <br>
    <input type="checkbox" name="c8" class="npsort-checkbox npsort-class" id="npsort-c8" data-regex="盾" checked></input>
    <label for="npsort-c8" class="npsort-checkbox-label">盾</label>
    <input type="checkbox" name="c9" class="npsort-checkbox npsort-class" id="npsort-c9" data-regex="裁" checked></input>
    <label for="npsort-c9" class="npsort-checkbox-label">裁</label>
    <input type="checkbox" name="c10" class="npsort-checkbox npsort-class" id="npsort-c10" data-regex="讐" checked></input>
    <label for="npsort-c10" class="npsort-checkbox-label">讐</label>
    <input type="checkbox" name="c11" class="npsort-checkbox npsort-class" id="npsort-c11" data-regex="月" checked></input>
    <label for="npsort-c11" class="npsort-checkbox-label">月</label>
    <input type="checkbox" name="c12" class="npsort-checkbox npsort-class" id="npsort-c12" data-regex="分" checked></input>
    <label for="npsort-c12" class="npsort-checkbox-label">分</label>
    <input type="checkbox" name="c13" class="npsort-checkbox npsort-class" id="npsort-c13" data-regex="降" checked></input>
    <label for="npsort-c13" class="npsort-checkbox-label">降</label>
    <input type="checkbox" name="c14" class="npsort-checkbox npsort-class" id="npsort-c14" data-regex="詐" checked></input>
    <label for="npsort-c14" class="npsort-checkbox-label">詐</label>
    <input type="checkbox" name="call" class="npsort-checkbox npsort-class-all" id="npsort-call" data-regex="全" checked></input>
    <label for="npsort-call" class="npsort-checkbox-label">全</label>
  </div>
  <div>
    <input type="checkbox" name="t1" class="npsort-checkbox npsort-toggle" id="npsort-t1" data-regex="Yes" checked></input>
    <label for="npsort-t1" class="npsort-checkbox-label">スキル使用する</label>
    <input type="checkbox" name="t2" class="npsort-checkbox npsort-toggle" id="npsort-t2" data-regex="No" checked></input>
    <label for="npsort-t2" class="npsort-checkbox-label">スキル使用しない</label>
  </div>
</div>
}}}}}
#js(){{{{{
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
  // このJS用のCSSを追加
  for (var i = 0, root = document.getElementById('npsort-inlinestyles'), nodes = root.childNodes; i < nodes.length; i++) {
    if (nodes[i].nodeType === document.COMMENT_NODE) {
      var elem = document.createElement('style');
      elem.type = 'text/css';
      elem.setAttribute('media', 'screen');
      if (elem.styleSheet) elem.styleSheet.cssText = nodes[i].data;
      else elem.appendChild(document.createTextNode(nodes[i].data));
      document.getElementsByTagName('head').item(0).appendChild(elem);
      root.parentNode.removeChild(root);
      break;
    }
  }

  // NPソートテーブルがなければ処理しない
  const tTable = $('.npsort table, .npsort_cmd table');
  if (tTable.length !== 1) return;

  const isCommandPage = $('.npsort_cmd').length != 0;

  // 現在のソート状態
  let curSortElem = null;

  // 現在表示中のHTML
  let displayHtml = '';
  // 描画予定のHTML
  let delayList = [];
  // 表最下部の位置
  let tableBottom = 0;

  // ソート機能を付けるカラムに振る舞いを決めるCSS名を設定
  const hCols = $('thead td', tTable);
  const bRows = $('tbody tr', tTable);
  const cacheRows = [];

  if (isCommandPage) {
    // NP獲得効率(コマンド合計)用
    hCols[0].className = 'headbtn ex col_0';
    hCols[1].className = 'headbtn name col_1';
    hCols[2].className = 'headbtn toggle col_2';
    hCols[3].className = 'headbtn class col_3';
    hCols[4].className = 'headbtn ex col_4';
    hCols[5].className = 'headbtn ex col_5';
    hCols[6].className = 'headbtn ex col_6';
    hCols[7].className = 'headbtn ex col_7';
    hCols[11].className = 'headbtn name col_8';
    hCols[12].className = 'headbtn ex col_9';
    hCols[13].className = 'headbtn name col_10';
    hCols[14].className = 'headbtn ex col_11';

    // 表キャッシュ
    for (let i = 0; i < bRows.length; i++) {
      let cache = {};
      const r0 = bRows[i];
      cache.html = r0.outerHTML; // キャッシュ
      cache.html2 = cache.html.split('<tr>').join('<tr style="display:none;">'); // キャッシュ(非表示時)
      // 並べ替え用の比較データ
      cache.data = [];
      cache.data[0] = [r0.cells[0].innerText];
      cache.data[1] = r0.cells[1].innerText;
      cache.data[2] = r0.cells[2].innerText;
      cache.data[3] = r0.cells[3].innerText;
      cache.data[4] = [r0.cells[4].innerText];
      cache.data[5] = [r0.cells[5].innerText];
      cache.data[6] = [r0.cells[6].innerText];
      cache.data[7] = [r0.cells[7].innerText];
      cache.data[8] = r0.cells[8].innerText;
      cache.data[9] = [r0.cells[9].innerText];
      cache.data[10] = r0.cells[10].innerText;
      cache.data[11] = [r0.cells[11].innerText];
      cache.useSkillColumn = cache.data[2].length > 1 ? 2 : 1;
      cache.classColumn = cache.data[3]; // フィルターに使うクラス列は共通の変数に置く   
      cache.enabled = true; // 表示状態
      cacheRows.push(cache);
    }
  } else {
    // NP獲得効率用
    hCols[0].className = 'headbtn ex col_0';
    hCols[1].className = 'headbtn name col_1';
    hCols[2].className = 'headbtn toggle col_2';
    hCols[3].className = 'headbtn class col_3';
    hCols[6].className = 'headbtn abq col_6';
    hCols[9].className = 'headbtn noble col_13';
    hCols[11].className = 'headbtn abq col_7';
    hCols[12].className = 'headbtn abq col_8';
    hCols[13].className = 'headbtn ex col_9';
    hCols[14].className = 'headbtn abq col_10';
    hCols[15].className = 'headbtn abq col_11';
    hCols[16].className = 'headbtn ex col_12';

    for (let i = 0; i < bRows.length; i+=3) {
      let cache = {};
      let idx = i;
      const r0 = bRows[idx], r1 = bRows[idx+1], r2 = bRows[idx+2];
      cache.html = r0.outerHTML+r1.outerHTML+r2.outerHTML;
      cache.html2 = cache.html.split('<tr>').join('<tr style="display:none;">');
      cache.data = [];
      cache.data[0] = [r0.cells[0].innerText];
      cache.data[1] = r0.cells[1].innerText;
      cache.data[2] = r0.cells[2].innerText;
      cache.data[3] = r0.cells[3].innerText;
      idx = 6; cache.data[idx] = [r0.cells[idx].innerText, r1.cells[idx-4].innerText, r2.cells[idx-4].innerText];
      idx = 7; cache.data[idx] = [r0.cells[idx].innerText, r1.cells[idx-4].innerText, r2.cells[idx-4].innerText];
      idx = 8; cache.data[idx] = [r0.cells[idx].innerText, r1.cells[idx-4].innerText, r2.cells[idx-4].innerText];
      cache.data[9] = [r0.cells[9].innerText];
      idx = 10; cache.data[idx] = [r0.cells[idx].innerText, r1.cells[idx-5].innerText, r2.cells[idx-5].innerText];
      idx = 11; cache.data[idx] = [r0.cells[idx].innerText, r1.cells[idx-5].innerText, r2.cells[idx-5].innerText];
      cache.data[12] = [r0.cells[12].innerText];
      // 宝具リチャージの値データはNP500の時の値(最後の行)で比較
      cache.data[13] = [r0.cells[13].innerText.split('\n').slice(-1)];
      cache.classColumn = cache.data[3];
      cache.useSkillColumn = cache.data[2].length > 1 ? 2 : 1;
      cache.enabled = true;
      cacheRows.push(cache);
    }
  }

  const crLength = cacheRows.length;

  // 3行区切りに表から対応する位置のセルの値を取得する
  const getFloats = function(row, col) {
    let items = [];
    for (let i = 0; i < crLength; i++) {
      let num = parseFloat(cacheRows[i].data[col][row])
      if (isNaN(num)) {
        items.push(0);
      } else {
        items.push(num);
      }
    }
    return items;
  };

  // 表から対応する位置のセルの文字列を取得する
  const getStrings = function(col) {
    let items = [];
    for (let i = 0; i < crLength; i++) {
      let text = cacheRows[i].data[col];
      if (text)
        items.push(text);
      else
        items.push('');
    }
    return items;
  }

  // ソート用関数
  const sortNumA = function(a, b) {
    return a - b;
  };
  const sortNumD = function(a, b) {
    return b - a;
  };
  const sortStrA = function(a, b) {
    a = a.toString().toLowerCase();
    b = b.toString().toLowerCase();
    if (a < b) return -1;
    else if (a > b) return 1;
    return 0;
  };
  const sortStrD = function(a, b) {
    a = a.toString().toLowerCase();
    b = b.toString().toLowerCase();
    if (b < a) return -1;
    else if (b > a) return 1;
    return 0;
  };

  // 100行だけ描画する
  const paintRows = function(force) {
    if (!force && delayList.length < 1) {
      tableBottom = 0;
      return;
    }
    for (let i = 0; i < 100; i++) {
      if (delayList.length < 1) {
        break;
      }
      displayHtml += delayList.shift();
    }
    $('tbody', tTable).html(displayHtml);
    tableBottom = tTable.height() + tTable.offset().top;
  };

  // フィルタリングとソート状態に基づいて表を組み換えする
  const tSortClickInternal = function(increment) {   
    let sortType, column, orderType;
    if (curSortElem) {
      let m = curSortElem.className.match(/(noble|name|class|abq|ex|toggle) col_(\d+)/i);
      // ソートの振る舞い
      sortType = m[1];
      // 比較するデータがある列番号
      column = parseInt(m[2]);
      let m2 = curSortElem.className.match(/order_(\d)/i);
      // 現在の並べ替え状態を一つ進める
      orderType = m2 ? parseInt(m2[1]) : -1;
      if (increment) {
        if (orderType >= 5) orderType = 0; else orderType++;
      }
      curSortElem.className = 'headbtn ' +sortType+' col_'+column.toString()+' order_'+orderType.toString();
    }

   
    let srcList = [];  // 並べ替える前の値データ
    let sortList = []; // ソートした値データ
    let moveRow = []; // ソートしたcacheRowsのインデックス

    if (sortType == null) {
      // 無ソートならそのまま
      for (let i = 0; i < crLength; i++) moveRow[i] = i;
    } else {
      if (sortType === 'abq') {
        // ABQソートは値データが3列に跨るソート(orderType 0～5)
        // row=0 ARTS asc ARTS desc
        // row=1 BUSTER asc, BUSTER desc
        // row=2 QUICK asc, QUICK desc
        let row = 0;
        if (orderType >= 2) row++;
        if (orderType >= 4) row++;
        srcList = getFloats(row, column);
        sortList = srcList.slice(0, srcList.length);
        if (orderType % 2 !== 0) sortList.sort(sortNumD);
        else sortList.sort(sortNumA);
      }
      else if (sortType === 'ex' || sortType === 'noble') {
        // 1列の数値ソート
        srcList = getFloats(0, column);
        sortList = srcList.slice(0, srcList.length);
        if (orderType % 2 !== 0) sortList.sort(sortNumD);
        else sortList.sort(sortNumA);
      }
      else {
        // 文字列ソート
        srcList = getStrings(column);
        sortList = srcList.slice(0, srcList.length);
        if (orderType % 2 !== 0) sortList.sort(sortStrD);
        else sortList.sort(sortStrA);
      }

      // cacheRowsのソート後のインデックスを求める

      for (let i = 0, l = sortList.length, l2 = srcList.length; i < l; i++) {
        for (let j = 0; j < l2; j++) {
          if (srcList[j] != null && sortList[i] == srcList[j]) {
            moveRow[i] = j;
            srcList[j] = null;
            break;
          }
        }
      }
    }

    // 新順序の行HTMLをストックしてスクロール位置まで描画する
    displayHtml = '';
    delayList = [];

    for (let i = 0, j = 0, l=moveRow.length; i < l; i++) {
      const row = cacheRows[moveRow[i]];
      if (row.enabled) delayList[j++] = row.html;
    }
    paintRows(true);
  };

  // ソート状態を切り替える
  const tSortClick = function(e) {
    let m = this.className.match(/(noble|name|class|abq|ex|toggle) col_(\d+)/i);
    if (m) {
      if (curSortElem && curSortElem != this) {
        curSortElem.className = curSortElem.className.replace(/order_\d+/i, '');
      }
      curSortElem = this;
      tSortClickInternal(true);
    }
  };

  // チェック入りのレア度とクラスのみフィルター表示する
  const tFilterToggle = function(e) {
    let enableRarity = '';
    let enableClass = '';
    let enableToggle = 0;
    // 表示するレアリティを求める
    $('.npsort-rarity').each((i,el) => {
      if ($(el).prop('checked')) enableRarity += $(el).data('regex').toString();
    });
    // 表示するクラスを求める
    let count = 0;
    $('.npsort-class').each((i,el) => {
      if ($(el).prop('checked')) {
        enableClass += $(el).data('regex').toString();
        count++;
      }
    });
    $('.npsort-toggle').each((i,el) => {
      if ($(el).prop('checked')) {
        if ($(el).data('regex').toString() === 'Yes') enableToggle |= 2;
        else enableToggle |= 1;
      }
    });
    // クラスボタンが全チェックなら全クラスボタンをチェック状態にする
    if ($('.npsort-class').length == count) {
      $('.npsort-class-all').prop('checked', true);
    } else {
      $('.npsort-class-all').prop('checked', false);
    }
    // 表示状態を変更する
    const regex = new RegExp('['+enableClass+']['+enableRarity+']');
    for (let i = 0; i < crLength; i++) {
      cacheRows[i].enabled = false;
      if (regex.test(cacheRows[i].classColumn) && ((cacheRows[i].useSkillColumn & enableToggle) !== 0)) {
        cacheRows[i].enabled = true;
      }
    }
    tSortClickInternal(false);
  };

  // 全クラス一括チェックする
  const tFilterToggleAll = function(e) {
    let enabled = $(this).prop('checked');
    $('.npsort-class').prop('checked', enabled);
    tFilterToggle();
  };

  // エレメントにイベント登録
  tTable.on('click', '.headbtn', tSortClick);
  $('#npfilter').on('change', '.npsort-checkbox', tFilterToggle);
  $('.npsort-class-all').bind('change', tFilterToggleAll);
  $('#npfilter').css('display', 'block');
  $(window).scroll(function() {
    if (tableBottom > 0 
      && ($(document).scrollTop() + $(window).height()) > tableBottom) {
        paintRows();
      }
  });
});
</script>
}}}}}