以下のページで使用したJavaScriptのメモです。
https://naon56.github.io/nikkiup2u3/

全体のソースコードは以下から見られます。
https://github.com/naon56/nikkiup2u3/tree/gh-pages


 

前回の記事
http://naon56-note.blog.jp/archives/5008769.html

SJISのCSVファイルからデータを表示する
※表示処理は仮です。

JavaScript
jquery.csv.js

/* Usage:
 *  jQuery.csv()(csvtext)               returns an array of arrays representing the CSV text.
 *  jQuery.csv("¥t")(tsvtext)           uses Tab as a delimiter (comma is the default)
 *  jQuery.csv("¥t", "'")(tsvtext)      uses a single quote as the quote character instead of double quotes
 *  jQuery.csv("¥t", "'¥"")(tsvtext)    uses single & double quotes as the quote character
 */
;
jQuery.extend({
    csv: function(delim, quote, linedelim) {
        delim = typeof delim == "string" ? new RegExp( "[" + (delim || ","   ) + "]" ) : typeof delim == "undefined" ? ","    : delim;
        quote = typeof quote == "string" ? new RegExp("^[" + (quote || '"'   ) + "]" ) : typeof quote == "undefined" ? '"'    : quote;
        //改行コードは環境に合わせて"\n"、"¥r"、"¥r¥n"、に変更します。
        lined = typeof lined == "string" ? new RegExp( "[" + (lined || "\n") + "]+") : typeof lined == "undefined" ? "\n" : lined;
 
        function splitline (v) {
            // Split the line using the delimitor
            var arr  = v.split(delim),
                out = [], q;
            for (var i=0, l=arr.length; i<l; i++) {
                if (q = arr[i].match(quote)) {
                    for (j=i; j<l; j++) {
                        if (arr[j].charAt(arr[j].length-1) == q[0]) { break; }
                    }
                    var s = arr.slice(i,j+1).join(delim);
                    out.push(s.substr(1,s.length-2));
                    i = j;
                }
                else { out.push(arr[i]); }
            }
 
            return out;
        }
 
        return function(text) {
            var lines = text.split(lined);
            for (var i=0, l=lines.length; i<l; i++) {
                lines[i] = splitline(lines[i]);
            }
            return lines;
        };
    }
});

readcsv.js

function loadTextFile( fName, dId ) {

//文字コードをSJISに変更。
jQuery.ajaxSetup( {
beforeSend: function( xhr, settings ) {
if (settings.url.endsWith( ".csv" ) ) {
xhr.overrideMimeType( "text/csv;charset=Shift_JIS" );
}
}
} );

jQuery( function() {
jQuery.get( fName, function( data ) {
var csv = jQuery.csv()(data);

//indexを使ってくり返し回数をカウント。
jQuery( csv ).each( function( index ) {

//画面への出力処理。
jQuery( "#"+dId +" table" ).append("<tr><th>"+this[0]+"</th><th>"+this[1]+"</th><th>"+this[3]+"</th><th>"+this[4]+"</th><th>"+this[5]+"</th><th>"+this[6]+"</th><th>"+this[7]+"</th><th>"+this[8]+"</th><th>"+this[9]+"</th><th>"+this[10]+"</th><th>"+this[11]+"</th><th>"+this[12]+"</th><th>"+this[13]+"</th></tr>");
} );
} );
} );
}

item.js

function loadDataFile() {

// console.log("No.: 36");

fName = "./javascript_item/hair.csv";
dId = "evaluation_hair";
loadTextFile( fName, dId );

}


HTML
<head>内

<script type="text/javascript" src="./jquery/jquery.csv.js" charset="UTF-8"></script>
<script type="text/javascript" src="./javascript_item/readcsv.js" charset="UTF-8"></script>
<script type="text/javascript" src="./javascript_item/item.js" charset="UTF-8"></script>

<body>内

<body onLoad="setStage(); setQuest(); setDifficulty(); setQuestNum(); evaluationFuncColosseum(); loadDataFile();">

<form name="ajaxForm">
<input type="button" value="←" onClick="loadDataFile()">
<div id="evaluation_hair"><table border="1"></table></div>
<input type="button" value="→" onClick="loadDataFile()">
</form>


参考
Ajax の研究 Shit-JIS テキストファイルを読み込む
jquery.csv2table.jsでShift_JISのCSVを表示する
CSVデータを表示する
Uncaught TypeError: $ is not a function の解決方法
javasprictのコードを書く順番について
Cannot read property 'style' of null と表示され解決できません
ExcelのCSVを読み込みHTMLで表に埋め込む
JavaScriptでCSVファイルを読み込む方法
Excelで開くと文字化けするUTF-8のCSVを文字コードを変換せずに開く方法


----------


Twitterやっています。ぜひチェックしてみてください。


ブログランキングに参加してます。よろしければポチっとお願いします。
ブログランキング・にほんブログ村へにほんブログ村
人気ブログランキング