javascriptのテーブル作成についてif文で

質問

javascriptのテーブル作成についてif文で作成しましたが思うように表示されませんでした。
var inner="";
var wrong=0;

inner="<table border='2'><caption>成績発表</caption><tr><th>問題</th><th>成績</th></tr>";
for (var mondai_index=0;mondai_index<mondai_max;mondai_index++) {
inner+="<tr>";
inner+="<td>"+"問題"+(mondai_index+1)+"</td>";
var user_answer=this.user_answer[mondai_index];
if (user_answer !== undefined) {
if (user_answer==this.mondai_data[mondai_index].c) {
inner+="<td>正解</td>";
}else{
inner+="<td>不正解</td>";
wrong++;
}
}else{
inner+="<td>解説文hogehoge</td>";

}
inner+="</tr>";
}
inner+="</table>";

よろしくお願いします。

回答No.1

saramanda1 · ベストアンサー

if文の中身を確認する前に、テーブルが思うように表示されていない理由を探してみましょう。以下のような点に注意してください。

変数innerの初期値が空文字列になっているか確認してください。それ以外の初期値だと、後続の文字列を足し算する際に想定外の文字列が表示される可能性があります。

mondai_max、user_answer、this.user_answer、this.mondai_dataなど、変数が適切に定義されているか確認してください。もし定義されていない場合、エラーが発生する可能性があります。

this.user_answer[mondai_index]が未定義の場合、代わりに"解説文hogehoge"が表示されるようになっていますが、本当にこれで正しいでしょうか？もし意図した表示内容ではない場合、代わりの文字列を用意してください。

上記の点を確認した上で、if文の中身を見てみましょう。現在のif文は以下のようになっています。

javascript
Copy code
if (user_answer !== undefined) {
if (user_answer==this.mondai_data[mondai_index].c) {
inner+="<td>正解</td>";
}else{
inner+="<td>不正解</td>";
wrong++;
}
}else{
inner+="<td>解説文hogehoge</td>";
}
このif文では、user_answerが未定義でない場合に、正解か不正解かを判定しています。もし未定義の場合、"解説文hogehoge"を表示するようになっています。しかし、このif文の外側にあるinner+="<tr>";で行を生成しているため、未定義の場合でも行が生成されてしまいます。このため、"解説文hogehoge"が意図した位置に表示されていない可能性があります。

この問題を解決するには、if文の内側で行を生成するように修正する必要があります。つまり、以下のようにif文の中身を変更する必要があります。

javascript
Copy code
if (user_answer !== undefined) {
if (user_answer == this.mondai_data[mondai_index].c) {
inner += "<td>正解</td>";
} else {
inner += "<td>不正解</td>";
wrong++;
}
inner += "</tr>"; // ここで行を閉じる
} else {
inner += "<td colspan='2'>解説文hogehoge</td></tr>"; // colspanでセルを結合する
}
上記の修正を加えることで、問題なくテーブルが生成される

お礼

以下のコード追加でテーブルは表示できました。
ありがとうございました。

} else {
inner+="<td>不正解</td>";
}

//追加　　表示OK
inner += "<td colspan='2'>解説文hogehoge</td>"; // colspanでセルを結合する
inner+="</tr>";

}
inner+="</table>";

回答No.3

AsarKingChang

>うまくいかなかったらまた質問しようと思います。
うぃ！

回答No.2

AsarKingChang

なんかこのソース。見覚えがあるな（笑）
状況もっと教えてもらえれば対応できまっせ！

補足

以前回答していただきお世話になりました。
なんとか自分の力でテーブル表示を解決できました。
csv出力は今、改良中です。うまくいかなかったらまた質問しようと思います。
ありがとうございました。

if (user_answer !== undefined) {
if (user_answer==this.mondai_data[mondai_index].c) {
//inner+="<td>正解</td>";

//undefinedと表示されます
//inner+="<td colspan='2'>"+qakey10[[this.mondai_no].k];

inner+="<td colspan='2'>"+this.mondai_data[mondai_index].k;
//inner+="<td colspan='2'>"+this.mondai_data[[this.mondai_no].k];

}else{
//inner+="<td>不正解</td>";
inner+="<td colspan='2'>"+this.mondai_data[mondai_index].k;
wrong++;

}