「javascript/サーヴァント一覧」の編集履歴（バックアップ）一覧に戻る

javascript/サーヴァント一覧 - (2017/01/31 (火) 12:53:15) のソース

#js(){{{{{
<meta charset="utf-8">
<style>
#svTable tbody tr:nth-of-type(2n+1){background-color: #F5FFFA;}
</style>
<script type="text/javascript" src="https://img.atwikiimg.com/www9.atwiki.jp/f_go/pub/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript" src="https://img.atwikiimg.com/www9.atwiki.jp/f_go/pub/js/jsonp.getData.js"></script>
<script type="text/javascript">
var rows;

$(document).ready(function(){
	var url = "https://spreadsheets.google.com/feeds/cells/13I84mtXMeSsO6JrpSm-Xg3g5LAeEtDP9R4V-ypB7M60/1/public/values";
	getData(url);	// 終了後に jsonp2rows(data) を呼び出し
});
// jsonp -> 2次元配列
function jsonp2rows(data){
	rows = [];
	$(data.feed.entry).each(function(){
		var row = parseInt(this.gs$cell.row);
		var col = parseInt(this.gs$cell.col);
		var t = this.gs$cell.$t;
		while(rows.length < row) {
			rows.push([]);
		}
		while(rows[row-1].length < col) {
			rows[row-1].push('');
		}
		rows[row-1][col-1] = t;
	});
	tableCreate();
}
// テーブル作成
function tableCreate(){
	var count = 0;	// 表示件数
	
	// 行（条件に合致しない行を非表示）
	var disFlag = selectRow();
	
	// 表組み
	var thead = $('<thead>');
	var tbody = $('<tbody>');
	$(rows).each(function(i, dataRow){
		// head（class名にピリオドを使用できないため、No.の場合だけ条件分岐）
		if(dataRow[0] == "No."){
			var tr = $('<tr>');
			$(dataRow).each(function(j){
				if(rows[0][j] == "No."){tr.append($('<th class="No">').html(''+dataRow[j]));}
				else{tr.append($('<th class="' + rows[0][j] + '">').html(''+dataRow[j]));}
			});
			thead.append(tr);
		}
		// body（同上）
		else if(disFlag[i] != 1){
			var tr = $('<tr>');
			$(dataRow).each(function(j){
				if(rows[0][j] == "No."){tr.append($('<td class="No">').html(''+dataRow[j]));}
				else if(rows[0][j] == "Name" && dataRow[j+1] != ""){
					tr.append($('<td class="' + rows[0][j] + '">')
					.html('<a href="http://www9.atwiki.jp/f_go/pages/' + dataRow[j+1] + '.html">' + dataRow[j] + '</a>'));
				}
				else{tr.append($('<td class="' + rows[0][j] + '">').html(''+dataRow[j]));}
			});
			tbody.append(tr);
			count = count + 1;
		}
	});
	$('#view1 table#svTable').html('').append(thead).append(tbody);
	
	// CSSの指定
	tableCSS();
	
	// 列（すべて非表示 ＆ 選択列のみ表示）
	selectCol();
	
	// 表示行数
	$("#view0").html(count + " / " + (rows.length - 1));
	
	// ソート機能
	$('#svTable').tablesorter();
}
// 列
function selectCol(){
	// すべて非表示
	$('#svTable thead tr th').css('display', 'none');
	$('#svTable tbody tr td').css('display', 'none');
	
	// 選択されている列のみ表示（スキル素材だけ例外処理）
	var select = ["No","Name"];
	$('[name="cb"]').each(function(i, str){
		if(this.checked && this.value == "スキル素材"){
			var mateS = $('[name="mateS"]').val().split(",");
			$(mateS).each(function(){
				select.push('スキル素材.' + this);
			});
		}
		else if(this.checked){
			Array.prototype.push.apply(select, str.value.split(","));
		}
	});
	$(select).each(function(){
		$('#svTable thead tr th.' + this).css('display', 'table-cell');
		$('#svTable tbody tr td.' + this).css('display', 'table-cell');
	});
}
// 行
function selectRow(){
	var disFlag = new Array(rows.length - 1);	// 非表示フラグ
	
	// 範囲指定（数値）
	$('[name="num"]').each(function(){
		var Class = $(this).attr('class');
		var value = $(this).val();
		if(value > 0 && Class.match(/^(.+?) (.+?)$/)){
			var tgt = RegExp.$1;
			var x = RegExp.$2;
			$(rows[0]).each(function(i, title){
				if(title.indexOf(tgt) >= 0){tiNum = i; return false;}
			});
			$(rows).each(function(i){
				var num = rows[i][tiNum];
				if(x == "min" && parseInt(num) < parseInt(value)){disFlag[i] = 1;}
				if(x == "max" && parseInt(num) > parseInt(value)){disFlag[i] = 1;}
			});
		}
	});
	// 一致判定（文字列）[列タイトル][part:部分一致/full:完全一致][列数]
	$('[name="str"]').each(function(){
		var Class = $(this).attr('class');
		var value = $(this).val();
		if(value != "" && Class.match(/^(.+?) (.+?) (.+?)$/)){
			var tgt = RegExp.$1;
			var x = RegExp.$2;
			var n = RegExp.$3;
			var flag = 0;
			$(rows[0]).each(function(i, title){
				if(title.indexOf(tgt) >= 0){tiNum = i; return false;}
			});
			$(rows).each(function(i){
				for(var j=0; j<n; j++){
					var str = rows[i][tiNum+j];
					// スキル素材の例外処理
					if(tgt == "スキル素材"){
						var sozaiRange = $('[name="mateS"]').val();
						if(sozaiRange != "" && sozaiRange.indexOf(j+1) < 0){str = "";}
					}
					// 例外処理ここまで
					if(x == "part" && str.indexOf(value) >= 0){flag = 1;}
					if(x == "full" && str == value){flag = 1;}
					if(j == n-1){
						if(flag == 0){disFlag[i] = 1;}
						flag = 0;
					}
				}
			});
		}
	});
	
	return disFlag;
}
// CSS
function tableCSS(){
	// tbody部分のCSS指定
	$('#svTable tbody tr td').css('text-align', 'center');	// 基本は中央
	
	var right = ["min_H", "min_A", "max_H", "max_A", "再臨素材", "スキル素材"];
	$(right).each(function(i, tgt){
		$('#svTable tbody tr td.' + tgt).css('text-align', 'right');
	});
	
	var left = ["Name", "保有スキル", "クラススキル"];
	$(left).each(function(i, tgt){
		$('#svTable tbody tr td.' + tgt).css('text-align', 'left');
	});
	
	// thead部分のCSS指定
	$('#svTable thead tr th')
	.css('background-color', '#e6e6fa')
	.css('text-align', 'center')
	.css('height', '2.2em')
	.css('text-align', 'center');
	
	// Nameの最小幅を指定
	$('#svTable tbody tr td.Name').css('min-width', '10em');
	
	// aタグを普通の色に
	$('#svTable tbody tr td.Name a').css('color', 'black');
	$('#svTable tbody tr td.Name a').css('text-decoration', 'none');
}
// リセットボタン
function checkOut(){
	document.form1.reset();
	$("input:checkbox").attr("checked",false);
}
</script>
}}}}}
#html2(){{{
<form name="form1" id="form1">
<table>
	<tr>
		<td colspan="2"><input type="checkbox" name="cb" value="Rare" checked="checked">レアリティ</td>
		<td colspan="2">
			<select name="num" class="Rare min" style="width:6em;">
				<option value="0" selected>★0</option>
				<option value="1">★1 C</option>
				<option value="2">★2 U</option>
				<option value="3">★3 R</option>
				<option value="4">★4 SR</option>
				<option value="5">★5 SSR</option>
			</select>
			 ～ 
			<select name="num" class="Rare max" style="width:6em;">
				<option value="0">★0</option>
				<option value="1">★1 C</option>
				<option value="2">★2 U</option>
				<option value="3">★3 R</option>
				<option value="4">★4 SR</option>
				<option value="5" selected>★5 SSR</option>
			</select>
		</td>
	</tr>
	<tr>
		<td colspan="2"><input type="checkbox" name="cb" value="Class" checked="checked">クラス</td>
		<td colspan="2"><select name="str" class="Class full 1" style="width:10em;">
			<option value="" selected>すべてのクラス</option>
			<option value="剣">セイバー</option>
			<option value="弓">アーチャー</option>
			<option value="槍">ランサー</option>
			<option value="騎">ライダー</option>
			<option value="術">キャスター</option>
			<option value="殺">アサシン</option>
			<option value="狂">バーサーカー</option>
		</select></td>
	</tr>
	<tr>
		<td colspan="2"><input type="checkbox" name="cb" value="Attri">属性</td>
		<td colspan="2"><select name="str" class="Attri full 1" style="width:10em;">
			<option value="" selected>すべて</option>
			<option value="天">天</option>
			<option value="地">地</option>
			<option value="人">人</option>
			<option value="星">星</option>
		</select></td>
	</tr>
	<tr>
		<td colspan="2"><input type="checkbox" name="cb" value="Grow" checked="checked">成長タイプ</td>
		<td colspan="2"><select name="str" class="Grow full 1" style="width:10em;">
			<option value="" selected>すべて</option>
			<option value="凸型">凸型 : 中盤成長</option>
			<option value="凸型弱">凸型弱</option>
			<option value="平均">平均</option>
			<option value="凹型弱">凹型弱</option>
			<option value="凹型">凹型 : 両端成長</option>
		</select></td>
	</tr>
	<tr>
		<td colspan="2"><input type="checkbox" name="cb" value="min_H,min_A" checked="checked">初期（Lv.1）</td>
		<td>HP <input type="text" name="num" class="min_H min" style="width:3em;" value="0"> ～ <input type="text" name="num" class="min_H max" style="width:3em;" value="0"></td>
		<td>ATK <input type="text" name="num" class="min_A min" style="width:3em;" value="0"> ～ <input type="text" name="num" class="min_A max" style="width:3em;" value="0"></td>
	</tr>
	<tr>
		<td colspan="2"><input type="checkbox" name="cb" value="max_H,max_A" checked="checked">最大（Lv.MAX）</td>
		<td>HP <input type="text" name="num" class="max_H min" style="width:3em;" value="0"> ～ <input type="text" name="num" class="max_H max" style="width:3em;" value="0"></td>
		<td>ATK <input type="text" name="num" class="max_A min" style="width:3em;" value="0"> ～ <input type="text" name="num" class="max_A max" style="width:3em;" value="0"></td>
	</tr>
	<tr>
		<td rowspan="2"><input type="checkbox" name="cb" value="Noble,Card" checked="checked">Card</td>
		<td style="text-align:center;">宝具</td>
		<td style="text-align:center;">対象 <select name="str" class="Noble part 1" style="width:7.5em;">
			<option value="" selected>すべて</option>
			<option value="単体">単体</option>
			<option value="全体">全体</option>
			<option value="補助">補助</option>
		</select></td>
		<td style="text-align:center;">種類 <select name="str" class="Noble part 1" style="width:7.5em;">
			<option value="" selected>すべて</option>
			<option value="Ｑ">Quick</option>
			<option value="Ａ">Arts</option>
			<option value="Ｂ">Buster</option>
		</select></td>
	</tr>
	<tr>
		<td style="text-align:center;">配分</td>
		<td colspan="2"><select name="str" class="Card full 1" style="width:10em;">
			<option value="" selected>すべて</option>
			<option value="ＱＱＱＡＢ">ＱＱＱＡＢ:3 Quick</option>
			<option value="ＱＡＡＡＢ">ＱＡＡＡＢ:3 Arts</option>
			<option value="ＱＡＢＢＢ">ＱＡＢＢＢ:3 Buster</option>
			<option value="ＱＡＡＢＢ">ＱＡＡＢＢ:-1 Quick</option>
			<option value="ＱＱＡＢＢ">ＱＱＡＢＢ:-1 Arts</option>
			<option value="ＱＱＡＡＢ">ＱＱＡＡＢ:-1 Buster</option>
		</select></td>
	</tr>
	<tr>
		<td colspan="2"><input type="checkbox" name="cb" value="保有スキル">保有スキル</td>
		<td colspan="2"><input type="text" style="width:12em;" name="str" class="保有スキル part 3" value=""></td>
	</tr>
	<tr>
		<td colspan="2"><input type="checkbox" name="cb" value="クラススキル">クラススキル</td>
		<td colspan="2"><input type="text" style="width:12em;" name="str" class="クラススキル part 4" value=""></td>
	</tr>
	<tr>
		<td colspan="2"><input type="checkbox" name="cb" value="再臨素材">霊基再臨素材</td>
		<td colspan="2"><select name="str" class="再臨素材 part 4" style="width:10em;">
			<option value="" selected>指定なし</option>
			<option value="英雄の証">英雄の証</option>
			<option value="凶骨">凶骨</option>
			<option value="竜の牙">竜の牙</option>
			<option value="虚影の塵">虚影の塵</option>
			<option value="世界樹の種">世界樹の種</option>
			<option value="ゴーストランタン">ゴーストランタン</option>
			<option value="八連双晶">八連双晶</option>
			<option value="蛇の宝玉">蛇の宝玉</option>
			<option value="鳳凰の羽根">鳳凰の羽根</option>
			<option value="無間の歯車">無間の歯車</option>
			<option value="禁断の頁">禁断の頁</option>
			<option value="ホムンクルスベビー">ホムンクルスベビー</option>
			<option value="隕蹄鉄">隕蹄鉄</option>
			<option value="竜の逆鱗">竜の逆鱗</option>
			<option value="混沌の爪">混沌の爪</option>
			<option value="蛮神の心臓">蛮神の心臓</option>
			<option value="精霊根">精霊根</option>
			<option value="戦馬の幼角">戦馬の幼角</option>
			<option value="血の涙石">血の涙石</option>
			<option value="黒獣脂">黒獣脂</option>
		</select></td>
	</tr>
	<tr>
		<td colspan="2"><input type="checkbox" name="cb" value="スキル素材">スキル強化素材</td>
		<td><select name="str" class="スキル素材 part 9" style="width:10em;">
			<option value="" selected>指定なし</option>
			<option value="英雄の証">英雄の証</option>
			<option value="凶骨">凶骨</option>
			<option value="竜の牙">竜の牙</option>
			<option value="虚影の塵">虚影の塵</option>
			<option value="世界樹の種">世界樹の種</option>
			<option value="ゴーストランタン">ゴーストランタン</option>
			<option value="八連双晶">八連双晶</option>
			<option value="蛇の宝玉">蛇の宝玉</option>
			<option value="鳳凰の羽根">鳳凰の羽根</option>
			<option value="無間の歯車">無間の歯車</option>
			<option value="禁断の頁">禁断の頁</option>
			<option value="ホムンクルスベビー">ホムンクルスベビー</option>
			<option value="隕蹄鉄">隕蹄鉄</option>
			<option value="竜の逆鱗">竜の逆鱗</option>
			<option value="混沌の爪">混沌の爪</option>
			<option value="蛮神の心臓">蛮神の心臓</option>
			<option value="精霊根">精霊根</option>
			<option value="戦馬の幼角">戦馬の幼角</option>
			<option value="血の涙石">血の涙石</option>
			<option value="黒獣脂">黒獣脂</option>
		</select></td>
		<td style="text-align:center;">範囲 <select name="mateS" style="width:7.5em;">
			<option value="" selected>指定なし</option>
			<option value="1,2,3,4,5">Lv.1 - 6</option>
			<option value="6,7,8,9"  >Lv.7 - 10</option>
		</select></td>
	</tr>
	<tr>
		<td rowspan="2" colspan="2" style="text-align:center;">その他</td>
		<td><input type="checkbox" name="cb" value="Cost">コスト</td>
		<td><input type="checkbox" name="cb" value="Open">実装日</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="cb" value="性別,方針,性格,身長,体重">プロフィール</td>
		<td><input type="checkbox" name="cb" value="筋力,耐久,敏捷,魔力,幸運,宝具">パラメータ</td>
	</tr>
	<tr align=center>
		<td colspan="2">
			<form name="btn1" id="btn1"><input type="button" value="全解除" onclick="checkOut()"></form>
		</td>
		<td colspan="2">
			<form name="btn2" id="btn2"><input type="button" value="表示" onclick="tableCreate()"></form>
		</td>
	</tr>
</table>
</form>
<div id="view0">表示まで数秒待ってください</div>
<div id="view1"><table id="svTable"></table></div>
}}}