「javascript/サーヴァント一覧」の編集履歴(バックアップ)一覧はこちら

javascript/サーヴァント一覧 - (2016/01/20 (水) 11:32:40) の1つ前との変更点

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

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

#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; // 表示件数 // main 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(){ // head if(this[0] == "No."){ var tr = $('<tr>'); $(select).each(function(){ var th = $('<th style="background-color:#e6e6fa; text-align:center; height:2em;">'); tr.append(th.html(""+rows[0][this])); }); 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>"; if(i == this){ // <td>スタイルの設定 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] != "Name" && 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 = ["0","3"]; for(var i=1; i<=14; i++){ if(document.forms["form1"].elements["c" + i].checked){ var str = document.forms["form1"].elements["c" + i].value; 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] == "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 != "" && indexArray(srv, mate, num, 9) == -1 ){return 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; } </script> }}}}} #html2(){{{ <form name="form1" id="form1"> <table> <tbody> <tr> <td colspan="2"><input type="checkbox" name="c1" value="1" 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="4" checked="checked">クラス</td> <td colspan="2"><select name="class1" style="width:10em;"> <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="c4" value="5" checked="checked">成長タイプ</td> <td colspan="2"><select name="grow1" style="width:10em;"> <option value="全">すべて</option> <option value="凸型">凸型 : 中盤成長</option> <option value="凸型弱">凸型弱</option> <option value="平均">平均</option> <option value="凹型弱">凹型弱</option> <option value="凹型">凹型 : 両端成長</option> </select></td> </tr> <tr> <td rowspan="2"><input type="checkbox" name="c5" value="6,7" checked="checked">初期</td> <td style="text-align:center;">HP</td> <td colspan="2"> <input type="text" size="6" name="minH1" value="0"> ~ <input type="text" size="6" name="minH2" value="0"> </td> </tr> <tr> <td style="text-align:center;">ATK</td> <td colspan="2"> <input type="text" size="6" name="minA1" value="0"> ~ <input type="text" size="6" name="minA2" value="0"> </td> </tr> <tr> <td rowspan="2"><input type="checkbox" name="c6" value="8,9" checked="checked">最大</td> <td style="text-align:center;">HP</td> <td colspan="2"> <input type="text" size="6" name="maxH1" value="0"> ~ <input type="text" size="6" name="maxH2" value="0"> </td> </tr> <tr> <td style="text-align:center;">ATK</td> <td colspan="2"> <input type="text" size="6" name="maxA1" value="0"> ~ <input type="text" size="6" name="maxA2" value="0"> </td> </tr> <tr> <td rowspan="2"><input type="checkbox" name="c7" value="10,11" checked="checked">Card</td> <td style="text-align:center;">宝具</td> <td>対象 <select name="range1" style="width:8em;"> <option value="全">すべて</option> <option value="単体">単体</option> <option value="全体">全体</option> <option value="補助">補助</option> </select></td> <td style="text-align:center;">種類 <select name="type1" style="width:8em;"> <option value="全">すべて</option> <option value="Q">Quick</option> <option value="A">Arts</option> <option value="B">Buster</option> </select></td> </tr> <tr> <td style="text-align:center;">配分</td> <td colspan="2"><select name="deck1" style="width:10em;"> <option value="全">すべて</option> <option value="QQQAB">QQQAB:3 Quick</option> <option value="QAAAB">QAAAB:3 Arts</option> <option value="QABBB">QABBB:3 Buster</option> <option value="QAABB">QAABB:-1 Quick</option> <option value="QQABB">QQABB:-1 Arts</option> <option value="QQAAB">QQAAB:-1 Buster</option> </select></td> </tr> <tr> <td colspan="2"><input type="checkbox" name="c8" value="12,13,14">保有スキル</td> <td colspan="2"><input type="text" size="22" name="Psk1" value=""></td> </tr> <tr> <td colspan="2"><input type="checkbox" name="c9" value="15,16,17,18">クラススキル</td> <td colspan="2"><input type="text" size="22" name="Csk1" value=""></td> </tr> <tr> <td colspan="2"><input type="checkbox" name="c13" value="31,32,33,34">霊基再臨素材</td> <td colspan="2"><input type="text" size="22" name="mateR1" value=""></td> </tr> <tr> <td colspan="2"><input type="checkbox" name="c14" value="35,36,37,38,39,40,41,42,43">スキル強化素材</td> <td colspan="2"><input type="text" size="22" name="mateS1" value=""></td> </tr> <tr> <td rowspan="2" colspan="2" style="text-align:center;">その他</td> <td><input type="checkbox" name="c2" value="2">コスト</td> <td><input type="checkbox" name="c10" value="19">実装日</td> </tr> <tr> <td><input type="checkbox" name="c11" value="20,21,22,23,24">プロフィール</td> <td><input type="checkbox" name="c12" value="25,26,27,28,29,30">パラメータ</td> </tr> <tr align=center> <td colspan="4"><form name="btn1" id="btn1"> <input type="button" value="表示" onclick="tableCreate()"> </form></td> </tr> </tbody> </table> </form> <div id="view0"></div> <div id="view1" class="zeb"></div> }}}
#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; // 表示件数 // main 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>"; if(rows[0][i].indexOf(this) != -1){ // <td>スタイルの設定 if(rows[0][i] == "Name"){ td = "<td>"; var txt = ""; if(document.forms["form1"].elements["link1"].checked){ 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<=14; 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; 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] == "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 != "" && indexArray(srv, mate, num, 9) == -1 ){return 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; } </script> }}}}} #html2(){{{ <form name="form1" id="form1"> <table> <tbody> <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="全">すべてのクラス</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="Grow" checked="checked">成長タイプ</td> <td colspan="2"><select name="grow1" style="width:10em;"> <option value="全">すべて</option> <option value="凸型">凸型 : 中盤成長</option> <option value="凸型弱">凸型弱</option> <option value="平均">平均</option> <option value="凹型弱">凹型弱</option> <option value="凹型">凹型 : 両端成長</option> </select></td> </tr> <tr> <td rowspan="2"><input type="checkbox" name="c5" value="min_H,min_A" checked="checked">初期</td> <td style="text-align:center;">HP</td> <td colspan="2"> <input type="text" size="6" name="minH1" value="0"> ~ <input type="text" size="6" name="minH2" value="0"> </td> </tr> <tr> <td style="text-align:center;">ATK</td> <td colspan="2"> <input type="text" size="6" name="minA1" value="0"> ~ <input type="text" size="6" name="minA2" value="0"> </td> </tr> <tr> <td rowspan="2"><input type="checkbox" name="c6" value="max_H,max_A" checked="checked">最大</td> <td style="text-align:center;">HP</td> <td colspan="2"> <input type="text" size="6" name="maxH1" value="0"> ~ <input type="text" size="6" name="maxH2" value="0"> </td> </tr> <tr> <td style="text-align:center;">ATK</td> <td colspan="2"> <input type="text" size="6" name="maxA1" value="0"> ~ <input type="text" size="6" name="maxA2" value="0"> </td> </tr> <tr> <td rowspan="2"><input type="checkbox" name="c7" value="Noble,Card" checked="checked">Card</td> <td style="text-align:center;">宝具</td> <td>対象 <select name="range1" style="width:8em;"> <option value="全">すべて</option> <option value="単体">単体</option> <option value="全体">全体</option> <option value="補助">補助</option> </select></td> <td style="text-align:center;">種類 <select name="type1" style="width:8em;"> <option value="全">すべて</option> <option value="Q">Quick</option> <option value="A">Arts</option> <option value="B">Buster</option> </select></td> </tr> <tr> <td style="text-align:center;">配分</td> <td colspan="2"><select name="deck1" style="width:10em;"> <option value="全">すべて</option> <option value="QQQAB">QQQAB:3 Quick</option> <option value="QAAAB">QAAAB:3 Arts</option> <option value="QABBB">QABBB:3 Buster</option> <option value="QAABB">QAABB:-1 Quick</option> <option value="QQABB">QQABB:-1 Arts</option> <option value="QQAAB">QQAAB:-1 Buster</option> </select></td> </tr> <tr> <td colspan="2"><input type="checkbox" name="c8" value="保有スキル">保有スキル</td> <td colspan="2"><input type="text" size="22" name="Psk1" value=""></td> </tr> <tr> <td colspan="2"><input type="checkbox" name="c9" value="クラススキル">クラススキル</td> <td colspan="2"><input type="text" size="22" name="Csk1" value=""></td> </tr> <tr> <td colspan="2"><input type="checkbox" name="c13" value="再臨素材">霊基再臨素材</td> <td colspan="2"><input type="text" size="22" name="mateR1" value=""></td> </tr> <tr> <td colspan="2"><input type="checkbox" name="c14" value="スキル素材">スキル強化素材</td> <td colspan="2"><input type="text" size="22" name="mateS1" value=""></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="c10" value="Open">実装日</td> </tr> <tr> <td><input type="checkbox" name="c11" value="性別,方針,性格,身長,体重">プロフィール</td> <td><input type="checkbox" name="c12" value="筋力,耐久,敏捷,魔力,幸運,宝具">パラメータ</td> </tr> <td colspan="2"><input type="checkbox" name="link1">個別ページへのリンク</td> <tr align=center> <td colspan="4"><form name="btn1" id="btn1"> <input type="button" value="表示" onclick="tableCreate()"> </form></td> </tr> </tbody> </table> </form> <div id="view0"></div> <div id="view1" class="zeb"></div> }}}

表示オプション

横に並べて表示:
変化行の前後のみ表示: