UnitStatus

by Sure Sure

HTML

Edit in JSFiddle
JavaScript
HTML
CSS
Result
<div class='container'>
  <div class='filters'>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='名称' placeholder='名称' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='★' placeholder='★' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='武器' placeholder='武器' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='主属性' placeholder='主属性' />
    </div>
    <div class='filter-container'>
      <input autocomplete='off' class='filter' name='副属性' placeholder='副属性' />
    </div>
    <div class='clearfix'></div>
  </div>
</div>
<div class='container'>
  <table id="unitStatusTable">
    <thead>
      <th>No</th>
      <th>名称</th>
      <th>★</th>
      <th>武器</th>
      <th>主属性</th>
      <th>副属性</th>
      <th>HP</th>
      <th>攻撃</th>
      <th>回復</th>
    </thead>
    <tbody>
    </tbody>
  </table>

  <br>
  <div>
    <a href="http://wedata.net/databases/rtd_unit_status/items">データ管理場所＠WeData</a>
    <P id="lastUpdate"></P>
    <button id="resetData">
      データ再取得 (強制更新用。通常は自動で更新されます。)
    </button>
    <P id="mess"></P>
  </div>

CSS

Edit in JSFiddle
JavaScript
HTML
CSS
Result
.actions a {
  display: block;
  margin: 25px auto 0;
  width: 200px;
  text-align: center;
  background: #b31d14;
  color: #c8c8c8;
  padding: 6px;
  border-radius: 3px;
  text-decoration: none;
}

.filters {
  margin-bottom: 20px;
}

.filter-container {
  float: left;
  width: 15%;
  padding-right: 10px;
}

.filter-container:last-of-type {
  padding-right: 0;
}

.filter-container input {
  -webkit-appearance: none;
  border: 1px solid #999;
  background: #FFF;
  border-radius: 2px;
  font-size: x-small;
  width: 100%;
}

.filter-container input:focus {
  outline: none;
}

table {
  width: 100%;
  border-collapse: collapse;
}

table th {
  text-align: left;
  border-bottom: 1px solid #043a47;
}

table th,
table td {
  padding: 6px 4px;
  font-size: x-small;
}

table td {
  border-bottom: 1px solid #087891;
  font-size: x-small;
}

table tr:last-of-type td {
  border-bottom: none;
}

table tr td:last-of-type {
  border-right: none;
}

.clearfix {
  clear: both;
  width: 100%;
}

a,
button,
p,
div {
  font-size: xx-small;
  text-align: right;
}

.left {
  text-align: left;
}

JavaScript

Edit in JSFiddle
JavaScript
HTML
CSS
Result
//データ強制更新ボタン
$("#resetData").click(function() {
  $("#mess").text("データ再取得実行中...");
  localStorage.removeItem("rtd_unit_status_info");
  localStorage.removeItem("rtd_unit_status_items");
  getUnitData();
});

//画面描画後処理
$(document).ready(function() {
  //データ取得＆テーブル生成
  getUnitData();
});

/*****************************************************/
//データ取得	getUnitData
//WeDataからJSONPで取得し、localstorageに格納する処理。
//処理完了後に後処理として「getUnitData_after()」を実行する。
//	[LocalStorage Key]
//		rtd_unit_status_info : WeData基本情報。更新日等を保持。
//		rtd_unit_status_items : ユニットステータスデータ本体。
/*****************************************************/
function getUnitData() {
  var flgNeedGetJsonData = false;
  var chkInfo;
  var chkItems;
  // ローカルストレージ対応判定
  if (!localStorage) {
    alert('ローカルストレージに対応したブラウザを使用してください。');
    flgNeedGetJsonData = true;
    retrun(false);
  } else {
    //LS存在チェック
    chkInfo = localStorage.getItem('rtd_unit_status_info');
    chkItems = localStorage.getItem('rtd_unit_status_items');
    if (!chkInfo || !chkItems) {
      flgNeedGetJsonData = true;
    }
  }
  //LSデータ更新確認（JSONP）rtd_unit_status_info
  var url = 'http://wedata.net/databases/rtd_unit_status.json?callback=?';
  var chkInfo = JSON.parse(chkInfo);
  $.getJSON(url, function(jsonUnitStatusInfo) {
    $("#mess").text("データ更新確認中...");
    if (flgNeedGetJsonData || (chkInfo['updated_at'] != jsonUnitStatusInfo['updated_at'])) {
      localStorage.setItem('rtd_unit_status_info', JSON.stringify(jsonUnitStatusInfo));
      flgNeedGetJsonData = true;
    }
    $("#lastUpdate").text("データ最終更新: " + jsonUnitStatusInfo['updated_at']);

    //データ取得が必要な場合
    if (flgNeedGetJsonData) {
      //データ取得（JSONP）
      //取得元：http://wedata.net/databases/rtd_unit_status/items
      var url = 'http://wedata.net/databases/rtd_unit_status/items.json?callback=?';
      $.getJSON(url, function(jsonUnitData) {
        $("#mess").text("データ取得実行中...");
        localStorage.setItem('rtd_unit_status_items',...