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

javascript/サーヴァント一覧 - (2016/02/21 (日) 11:32:15) のソース

#js(){{{{{
<meta charset="utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://img.atwikiimg.com/www9.atwiki.jp/f_go/pub/js/jquery.tablesorter.min.js"></script>
<script type="text/javascript">
var rows;
var count = 0;	// 表示件数

// 初回
function onLoadData(data) {
	// jsonp -> 2次元配列
	jsonp2rows(data);
	// table作成
	tableCreate();
}
// Googleスプレッドシートからjsonp形式のデータを取得
$(document).ready(function(){
	var url = "https://spreadsheets.google.com/feeds/cells/13I84mtXMeSsO6JrpSm-Xg3g5LAeEtDP9R4V-ypB7M60/1/public/values";
	var params = {
		alt: "json-in-script"
	};
	$.ajax({
		url: url,
		dataType: "jsonp",
		data: params,
		success: onLoadData
	});
});
// 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;
	});
}
// テーブル作成
function tableCreate(){
	var table = $('<table id="sort">');
	var tbody = $('<tbody>');
	count = 0;
	
	// 選択された列を確認
	var select = check();
	$(rows).each(function(){
		var dataRow = this;
		// head
		if(dataRow[0] == "No."){
			var tr = $('<tr>');
			$(select).each(function(){
				for(var i=0; i<dataRow.length; i++){
					if(dataRow[i].indexOf(this) != -1){
						var th = $('<th style="background-color:#e6e6fa; text-align:center; height:2em;">');
						tr.append(th.html(""+dataRow[i]));
					}
				}
			});
			table.append($('<thead>').append(tr));
		}
		// body
		else{
			tbody = appendTr(tbody, this, select);
		}
	});
	table.append(tbody);
	$("#view1").html("").append(table);
	$("#view0").html(count + " / " + (rows.length - 1));
	$('#sort').tablesorter();
}
// tr td要素の追加
function appendTr(tbody, srv, select){
	var tr = $("<tr>");
	var flag = 0;
	
	for(var i=0; i<srv.length; i++){
		// 条件に合わない行を非表示
		flag = display(tr, srv, i);
		if(flag == 1){break;}
		// 選択された列のみを表示
		$(select).each(function(){
			var td = "<td>";
			// <td>スタイルの設定
			if(rows[0][i].indexOf(this) != -1){
				// 名前
				if(rows[0][i] == "Name"){
					td = "<td>";
					var txt = "";
					if(document.forms["form1"].elements["link1"].checked && srv[i+1] > 0){
							txt = '<a href="http://www9.atwiki.jp/f_go/pages/' + srv[i+1] + '.html">' + srv[i] + '</a>';
					}
					else{txt = srv[i];}
					tr.append($(td).html(txt));
				}
				// 他
				else{
					if(	rows[0][i] == "min_H" || 
						rows[0][i] == "min_A" || 
						rows[0][i] == "max_H" || 
						rows[0][i] == "max_A" || 
						rows[0][i].indexOf("再臨素材") >= 0 || 
						rows[0][i].indexOf("スキル素材") >= 0 ){td = '<td style="text-align:right;">';}
					else if(
						rows[0][i].indexOf("保有スキル") == -1 && 
						rows[0][i].indexOf("クラススキル") == -1){td = '<td style="text-align:center;">';}
					else{td = "<td>";}
					tr.append($(td).html("" + srv[i]));
				}
			}
		});
	}
	if(flag != 1){tbody.append(tr); count++;}
	return tbody;
}
// 選択された列を確認
function check(){
	var select = ["No."];
	for(var i=1; i<=15; i++){
		// 3番目(クラス)の前に名前を挿入
		if(i == 3){select.push("Name");}
		if(document.forms["form1"].elements["c" + i].checked){
			var str = document.forms["form1"].elements["c" + i].value;
			// 例外処理：スキル強化素材
			if(str.indexOf("スキル素材") >= 0){
				var skiNum = document.form1.mateS2.value.split(",");
				for(var j=0; j<skiNum.length; j++){
					select.push(select, "スキル素材" + skiNum[j]);
				}
			}
			else{
				var num = str.split(",");
				Array.prototype.push.apply(select, num);
			}
		}
	}
	//select.sort(function(a, b) {return (parseInt(a) > parseInt(b)) ? 1 : -1;});
	return select;
}
// 条件に合わない行を非表示
function display(tr, srv, num){
	// ヘッダーは無条件で表示
	if(srv[0]=="No."){return 0;}
	else{
		// Rare
		if(rows[0][num] == "Rare"){
			if(	document.form1.rare1.value > srv[num] || 
				document.form1.rare2.value < srv[num]){return 1;}
		}
		// Class
		else if(rows[0][num] == "Class"){
			if(	document.form1.class1.value != '全' && 
				document.form1.class1.value != srv[num]){return 1;}
		}
		// 属性
		else if(rows[0][num] == "Attri"){
			if(	document.form1.attri1.value != '全' && 
				document.form1.attri1.value != srv[num]){return 1;}
		}
		// 成長タイプ
		else if(rows[0][num] == "Grow"){
			if(	document.form1.grow1.value != '全' && 
				document.form1.grow1.value != srv[num]){return 1;}
		}
		// HP/ATK
		else if(rows[0][num] == "min_H"){
			if(	document.form1.minH1.value - srv[num] > 0 ){return 1;}
			if(	document.form1.minH2.value - srv[num] < 0  && 
				document.form1.minH2.value != 0 ){return 1;}
		}
		else if(rows[0][num] == "min_A"){
			if(	document.form1.minA1.value - srv[num] > 0 ){return 1;}
			if(	document.form1.minA2.value - srv[num] < 0  && 
				document.form1.minA2.value != 0 ){return 1;}
		}
		else if(rows[0][num] == "max_H"){
			if(	document.form1.maxH1.value - srv[num] > 0 ){return 1;}
			if(	document.form1.maxH2.value - srv[num] < 0  && 
				document.form1.maxH2.value != 0 ){return 1;}
		}
		else if(rows[0][num] == "max_A"){
			if(	document.form1.maxA1.value - srv[num] > 0 ){return 1;}
			if(	document.form1.maxA2.value - srv[num] < 0  && 
				document.form1.maxA2.value != 0 ){return 1;}
		}
		// カード
		else if(rows[0][num] == "Noble"){
			if(	document.form1.range1.value != '全' && 
				srv[num].indexOf(document.form1.range1.value) == -1){return 1;}
			if(	document.form1.type1.value != '全' && 
				srv[num].indexOf(document.form1.type1.value) == -1){return 1;}
		}
		else if(rows[0][num] == "Card"){
			if(	document.form1.deck1.value != '全' && 
				document.form1.deck1.value != srv[num]){return 1;}
		}
		// 保有スキル
		else if(rows[0][num] == "保有スキル1"){
			var skill = document.form1.Psk1.value;
			if(	skill != "" && indexArray(srv, skill, num, 3) == -1 ){return 1;}
		}
		// クラススキル
		else if(rows[0][num] == "クラススキル1"){
			var skill = document.form1.Csk1.value;
			if(	skill != "" && indexArray(srv, skill, num, 4) == -1 ){return 1;}
		}
		// 霊基再臨素材
		else if(rows[0][num] == "再臨素材1"){
			var mate = document.form1.mateR1.value;
			if(	mate != "" && indexArray(srv, mate, num, 4) == -1){return 1;}
		}
		// スキル強化素材
		else if(rows[0][num] == "スキル素材1"){
			var mate = document.form1.mateS1.value;
			if(mate != ""){
				var skiNum = document.form1.mateS2.value;
				if(skiNum == ""			 && indexArray(srv, mate, num, 9) == -1){return 1;}
				if(skiNum == "1,2,3,4,5" && indexArray(srv, mate, num, 5) == -1){return 1;}
				if(skiNum == "6,7,8,9"	 && indexArray(srv, mate, num+5, 4) == -1){return 1;}
			}
		}
	}
}
// 配列中の要素に文字列が含まれているかを判定 (1:含む, -1:含まない)
function indexArray(arr, str, start, num){
	for(var i=start; i<start+num; i++){
		if(arr[i].indexOf(str) != -1){return 1;}
	}
	return -1;
}
function checkOut(){
	$("input:checkbox").attr("checked",false);
}
</script>
}}}}}
#html2(){{{
<form name="form1" id="form1">
<table>
	<tr>
		<td colspan="2"><input type="checkbox" name="c1" value="Rare" checked="checked">レアリティ</td>
		<td colspan="2">
			<select name="rare1" style="width:6em;">
				<option value="1" selected>★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="rare2" style="width:6em;">
				<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="c3" value="Class" checked="checked">クラス</td>
		<td colspan="2"><select name="class1" 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="c4" value="Attri">属性</td>
		<td colspan="2"><select name="attri1" 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="c5" value="Grow" checked="checked">成長タイプ</td>
		<td colspan="2"><select name="grow1" 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="c6" value="min_H,min_A" checked="checked">初期（Lv.1）</td>
		<td>HP <input type="text" style="width:3em;" name="minH1" value="0"> ～ <input type="text" style="width:3em;" name="minH2" value="0"></td>
		<td>ATK <input type="text" style="width:3em;" name="minA1" value="0"> ～ <input type="text" style="width:3em;" name="minA2" value="0"></td>
	</tr>
	<tr>
		<td colspan="2"><input type="checkbox" name="c7" value="max_H,max_A" checked="checked">最大（Lv.MAX）</td>
		<td>HP <input type="text" style="width:3em;" name="maxH1" value="0"> ～ <input type="text" style="width:3em;" name="maxH2" value="0"></td>
		<td>ATK <input type="text" style="width:3em;" name="maxA1" value="0"> ～ <input type="text" style="width:3em;" name="maxA2" value="0"></td>
	</tr>
	<tr>
		<td rowspan="2"><input type="checkbox" name="c8" value="Noble,Card" checked="checked">Card</td>
		<td style="text-align:center;">宝具</td>
		<td style="text-align:center;">対象 <select name="range1" 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="type1" 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="deck1" 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="c9" value="保有スキル">保有スキル</td>
		<td colspan="2"><input type="text" style="width:12em;" name="Psk1" value=""></td>
	</tr>
	<tr>
		<td colspan="2"><input type="checkbox" name="c10" value="クラススキル">クラススキル</td>
		<td colspan="2"><input type="text" style="width:12em;" name="Csk1" value=""></td>
	</tr>
	<tr>
		<td colspan="2"><input type="checkbox" name="c14" value="再臨素材">霊基再臨素材</td>
		<td colspan="2"><select name="mateR1" 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>
		</select></td>
	</tr>
	<tr>
		<td colspan="2"><input type="checkbox" name="c15" value="スキル素材">スキル強化素材</td>
		<td><select name="mateS1" 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>
		</select></td>
		<td style="text-align:center;">範囲 <select name="mateS2" 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="3" colspan="2" style="text-align:center;">その他</td>
		<td><input type="checkbox" name="c2" value="Cost">コスト</td>
		<td><input type="checkbox" name="c11" value="Open">実装日</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="c12" value="性別,方針,性格,身長,体重">プロフィール</td>
		<td><input type="checkbox" name="c13" value="筋力,耐久,敏捷,魔力,幸運,宝具">パラメータ</td>
	</tr>
	<tr>
		<td colspan="2"><input type="checkbox" name="link1">個別ページへのリンク</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" class="zeb"></div>
}}}