（1）alertを入れないと正しく動作しません。（2）値の比較が一部分だけ正しくないです。

Question

###前提・実現したいこと
各選手の成績を2016年と2017年のぶんを並べて
2017年のほうが良くなっていれば緑色
そうじゃなければ黄色
でセルを塗るようにしたいです。

成績のデータはCSVのデータにして、読み込みます。

###発生している問題・エラーメッセージ

(1)alertを出さないと色が塗られない

CheckMokuhyoのところで成績を比較して色をつけるのですが
これの前にalertを入れないと色が塗られません。
alertを入れるとちゃんと動きます。

(2)堂上選手の安打数が緑になってしまう

堂上選手の2017年の安打数は、2016年より超少ないのに
セルの色が緑色になってしまいます…。

###該当のソースコード
2017年の成績「testdata2017.txt」

"0.269","56","2"
"0.320","103","1"
"0.280","52","2"
"0.190","19","1"

2016年の成績「testdata2016.txt」

"0.216","36","3"
"0.292","175","3"
"0.226","28","0"
"0.254","116","6"

<div>
    <table border="1" cellspacing="2" cellpadding="2">
        <thead>
            <tr>
                <th>氏名</th>
                <th></th>
                <th>打率</th>
                <th>安打</th>
                <th>本塁打</th>
            </tr>
        </thead>
        <tbody>
            <tr align="right">
                <td rowspan="2">藤井</td>
                <td>2017年</td>
                <td id="K001"></td>
                <td id="K002"></td>
                <td id="K003"></td>
            </tr>
            <tr align="right">
                <td>2016年</td>
                <td id="K001m"></td>
                <td id="K002m"></td>
                <td id="K003m"></td>
            </tr>
            <tr align="right">
                <td rowspan="2">大島</td>
                <td>2017年</td>
                <td id="K101"></td>
                <td id="K102"></td>
                <td id="K103"></td>
            </tr>
            <tr align="right">
                <td>2016年</td>
                <td id="K101m"></td>
                <td id="K102m"></td>
                <td id="K103m"></td>
            </tr>
            <tr align="right">
                <td rowspan="2">亀澤</td>
                <td>2017年</td>
                <td id="K201"></td>
                <td id="K202"></td>
                <td id="K203"></td>
            </tr>
            <tr align="right">
                <td>2016年</td>
                <td id="K201m"></td>
                <td id="K202m"></td>
                <td id="K203m"></td>
            </tr>
            <tr align="right">
                <td rowspan="2">堂上</td>
                <td>2017年</td>
                <td id="K301"></td>
                <td id="K302"></td>
                <td id="K303"></td>
            </tr>
            <tr align="right">
                <td>2016年</td>
                <td id="K301m"></td>
                <td id="K302m"></td>
                <td id="K303m"></td>
            </tr>
        </tbody>
    </table>
</div>

    var mlist = ["01", "02", "03"];

    //ファイルからデータを受け取って整形して返す
    var trimDataFromText = function(data) {
        var trimedDatas = [];
        var zdatas = data.split(/\r\n|\r|\n/);
        for (var i = 0; i < zdatas.length; i++) {
            var _tmp = [];
            var zdatat = zdatas[i].split(',');
            for (var j = 0; j < zdatat.length; j++) {
                _tmp.push(zdatat[j].replace(/^\"|\"$/g, ''))
            }
            trimedDatas.push(_tmp);
        }
        return trimedDatas;
    }

    var z2017s;
    var z2016s;

    //2017ここから
    $.ajax({
        url: '/URL/testdata2017.txt',
        success: function(data) {
            var zdatas = trimDataFromText(data);
            z2017s = zdatas;
            for (var i = 0; i < zdatas.length; i++) {
                var zdata = zdatas[i];
                for (var j = 0; j < mlist.length; j++) {
                    $("#K" + i + mlist[j]).html(zdata[j]);
                }
            }
        }
    });

    //2016ここから
    $.ajax({
        url: '/URL/testdata2016.txt',
        success: function(data) {
            var zdatas = trimDataFromText(data);
            z2016s = zdatas;
            for (var i = 0; i < zdatas.length; i++) {
                var zdata = zdatas[i];
                for (var j = 0; j < mlist.length; j++) {
                    $("#K" + i + mlist[j] + "m").html(zdata[j]);
                }
            }
        }
    });


    //2017>2016なら緑、じゃなければ黄色
    function CheckMokuhyo() {

        for (var i = 0; i < 4; i++) {
            var z2017 = z2017s[i];
            var z2016 = z2016s[i];
            for (var j = 0; j < mlist.length; j++) {
                if (z2017[j] > z2016[j]) {
                    $("#K" + i + mlist[j]).css("background-color", "lightgreen");
                } else {
                    $("#K" + i + mlist[j]).css("background-color", "yellow");
                }
            }
        }
    }

    alert("なんらかのメッセージ");
    CheckMokuhyo();

###試したこと

たぶん、ajaxでcsvファイルを読むより前にCheckMokuhyoが実行されちゃうのが悪いのかな
という気がしたので
OKFlg(初期値は0)を作って
ajaxでファイルを読むところのsuccessのところで1ずつ足して

    while (OKFlg < 2) {
        //ここにVBScriptとかにあるsleepみたいなのが書きたいです…
    }
  CheckMokuhyo();

みたいにしたらいいのかな、と思って
とりあえずwhile (OKFlg < 2)の中にはconsole.logでなんか出すようにしたら
終了しなくなりました…。

###補足情報(言語/FW/ツール等のバージョンなど)
IE11です。（規則でこれしか使えないので）
Windowsは7と10半々くらいです。
SharePoint Foundation 2010の中で作っています。
まえに質問したときに
「SharePointの中でしたときとそうでないときとで動作が違う」
ということがあったので
今回はSharePointの外でもやってみて、やっぱりそうなるということも確認してみました。

Answer 1

$.whenという、「複数の非同期操作を待って実行する」関数があります（jQuery公式）。

var ajax1 = $.ajax(/* 2016年分 */);
var ajax2 = $.ajax(/* 2017年分 */);

/* 中略 */
$.when(ajax1, ajax2).done(CheckMokuhyo);

Comments

[sumire_cl]

マジで！うおお！まさにそれです！そんな関数あったんだ！
ちゃんと色が塗られました。超ありがとうございます！！

Answer 2

あなたの予想は正しいです。
ajaxのデータ取得は非同期に行われますので、CheckMokuhyoが先に実行され、その後にデータ取得が行われています。
ですので、データ取得完了を待ってCheckMokuhyoを実行する必要があります。
（alertがあると、そこで待機状態になるため、データ取得完了まで表示させたあとに閉じれば、適切に動いていることになるわけです）
また、2016のデータ取得と2017のデータ取得のどちらが先に完了するのかも、
実行するごとに違うことになるので、そこも考慮しなければなりません。
このあたりのjQueryでの処理順に関してはthen,when,Deferredなどを使いこなすのが美しくは有りますが、
ひとまずわかりやすく動作させるためには、

• 両方のsuccessのコードの最後でCheckMokuhyoを呼び出す。
• CheckMokuhyoの1回目呼び出しはもう片方のデータが足りてないのでなにもしない。
• 2回めの呼び出しでは両方のデータが足りているので処理する。

という方針でコーディングしてはいかがでしょうか？

Comments

[sumire_cl]

ありがとうございます。
そこんとこの動作を確認したくて
successのところでフラグを立てる
みたいなのをやってみたのですが
フラグが立つまで待つ
というのをどうしたらいいのかってところが思いつきませんでした。
JavaScriptにはsleepもDoEventsもないのですね…。

Answer 3

Windows7のIE11では

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<!--
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.3.2/css/onsenui.css" />
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.3.2/css/onsen-css-components.css" />
	<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.3.2/js/onsenui.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
-->
<script>
    var mlist = ["01", "02", "03"];

    //ファイルからデータを受け取って整形して返す
    var trimDataFromText = function(data) {
        var trimedDatas = [];
        var zdatas = data.split(/\r\n|\r|\n/);
        for (var i = 0; i < zdatas.length; i++) {
            var _tmp = [];
            var zdatat = zdatas[i].split(',');
            for (var j = 0; j < zdatat.length; j++) {
                _tmp.push(zdatat[j].replace(/^\"|\"$/g, ''))
            }
            trimedDatas.push(_tmp);
        }
        return trimedDatas;
    }

    var z2017s;
    var z2016s;

    //2017ここから
    var _promise1 = $.ajax({
        url: './testdata2017.txt'
    })
    .then(function(data) {
	    var zdatas = trimDataFromText(data);
	    z2017s = zdatas;
	    for (var i = 0; i < zdatas.length; i++) {
	        var zdata = zdatas[i];
	        for (var j = 0; j < mlist.length; j++) {
	            $("#K" + i + mlist[j]).html(zdata[j]);
	        }
	    }
    });

    //2016ここから
    var _promise2 = $.ajax({
        url: './testdata2016.txt'
    })
    .then(function(data) {
	    var zdatas = trimDataFromText(data);
	    z2016s = zdatas;
	    for (var i = 0; i < zdatas.length; i++) {
	        var zdata = zdatas[i];
	        for (var j = 0; j < mlist.length; j++) {
	            $("#K" + i + mlist[j] + "m").html(zdata[j]);
	        }
	    }
    });
    
    $.when(_promise1, _promise2)
    .then(function() {
        var jikan;
        var jikanm;

        for (var i = 0; i < 4; i++) {
            var z2017 = z2017s[i];
            var z2016 = z2016s[i];
            for (var j = 0; j < mlist.length; j++) {
                if (Number(z2017[j]) > Number(z2016[j])) {
                    $("#K" + i + mlist[j]).css("background-color", "lightgreen");
                } else {
                    $("#K" + i + mlist[j]).css("background-color", "yellow");
                }
            }
        }
    });
</script>

</head>
<body>
<div>
    <table border="1" cellspacing="2" cellpadding="2">
        <thead>
            <tr>
                <th>氏名</th>
                <th></th>
                <th>打率</th>
                <th>安打</th>
                <th>本塁打</th>
            </tr>
        </thead>
        <tbody>
            <tr align="right">
                <td rowspan="2">藤井</td>
                <td>2017年</td>
                <td id="K001"></td>
                <td id="K002"></td>
                <td id="K003"></td>
            </tr>
            <tr align="right">
                <td>2016年</td>
                <td id="K001m"></td>
                <td id="K002m"></td>
                <td id="K003m"></td>
            </tr>
            <tr align="right">
                <td rowspan="2">大島</td>
                <td>2017年</td>
                <td id="K101"></td>
                <td id="K102"></td>
                <td id="K103"></td>
            </tr>
            <tr align="right">
                <td>2016年</td>
                <td id="K101m"></td>
                <td id="K102m"></td>
                <td id="K103m"></td>
            </tr>
            <tr align="right">
                <td rowspan="2">亀澤</td>
                <td>2017年</td>
                <td id="K201"></td>
                <td id="K202"></td>
                <td id="K203"></td>
            </tr>
            <tr align="right">
                <td>2016年</td>
                <td id="K201m"></td>
                <td id="K202m"></td>
                <td id="K203m"></td>
            </tr>
            <tr align="right">
                <td rowspan="2">堂上</td>
                <td>2017年</td>
                <td id="K301"></td>
                <td id="K302"></td>
                <td id="K303"></td>
            </tr>
            <tr align="right">
                <td>2016年</td>
                <td id="K301m"></td>
                <td id="K302m"></td>
                <td id="K303m"></td>
            </tr>
        </tbody>
    </table>
</div>
</body>
</html>

で動きました。
Promise使うといい感じに出来ます。
あと２）に関しては文字列比較をしてるからなので数値変換すればOK

Comments

[sumire_cl]

ありがとうございます！

…さきほど教えていただいたやつは
whenの後ろは.doneだったのにこれは違う？？thenって何？

http://qiita.com/varmil/items/269496d3be071a297d76#then-%E3%81%A8-done-%E3%81%AE%E4%BD%BF%E3%81%84%E5%88%86%E3%81%91

「.then()と.done()は後続処理がチェーンするときの動作の順番が違う」
というのが違いで
今回みたいな後続処理が1個しかない場合はどっちでも変わらなくてオッケー
ということであっていますでしょうか？

そしてPromiseって何かというのは今から調べます…。

[sumire_cl]

つまり(2)のほうは
if (z2017[j] > z2016[j])
のところを
if (+z2017[j] > +z2016[j])
ですね。

…もしかしてこの文字列を数値に変換するやりかたは行儀が悪かったりしますか？

[rururu3]

thenとdoneの違い、ちゃんとは知ってませんが、thenでdoneの処理関数を呼び出す感じなので、ほぼ同じなのですが、thenでは引数多いのとPromiseを返すので引き続き処理できるのと状態変更できるだった気がします・・・
http://www.jquerystudy.info/reference/deferred/then.html

[rururu3]

JavaScriptでは数値変換手法がいっぱいあるのでなんとも言えませんが、- 0するのがいいっていうのを見たことがあるので私はそうしてます。(解答ではわかりやすいようにNumber関数使っていますが)

[sumire_cl]

-0…
こうですか？
if (z2017[j]-0 > z2016[j]-0)

[rururu3]

数値変換は色々ありますので
http://lealog.hateblo.jp/entry/2013/02/28/005010
ここらへん見ていただければ

[sumire_cl]

ありがとうございます。
数値変換どれが正解ってことよりも
あとから他人が見たときにこれ数値変換だってわかることがだいじなのですね。

そしてPromiseってなんだろうと知らべていたらDefferedも出てきて混乱中です。
たぶん改めて質問すると思います。そのときもよろしくお願いいたします。

[rururu3]

私は
https://techblog.yahoo.co.jp/programming/jquery-deferred/
と
http://azu.github.io/promises-book/
で勉強したので、参考にどうぞー