人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

VBSの質問です
<HTML><body><table>
<tr>
<td>第1回</td>
<td>1問目</td>
<td>赤いものはどれか<BR> <BR><BR>a りんご<BR>b みかん<BR>c いちご<BR>d 郵便ポスト<BR>e 消防車<BR></td>
<td>acde</td>
</tr>
<tr>
<td>第1回</td>
<td>2問目</td>
<td>オレンジ色のものはどれか1つ選べ。<BR> <BR>a りんご<BR>b みかん<BR>c いちご<BR>d 郵便ポスト<BR>e 消防車<BR></td>
<td>b</td>
</tr>
</table></body></html>

というようなHTMLがあるのですが
正解の選択肢の行に
<span style="background-color: #ffff00;">hoge</span>
を引きたいと思っているのですが

<HTML><body><table>
<tr>
<td>第1回</td>
<td>1問目</td>
<td>赤いものはどれか<BR> <BR><BR><span style="background-color: #ffff00;">a りんご</span><BR>b みかん<BR><span style="background-color: #ffff00;">c いちご</span><BR><span style="background-color: #ffff00;">d 郵便ポスト</span><BR><span style="background-color: #ffff00;">e 消防車</span><BR></td>
<td>acde</td>
</tr>
<tr>
<td>第1回</td>
<td>2問目</td>
<td>オレンジ色のものはどれか1つ選べ。<BR> <BR>a りんご<BR><span style="background-color: #ffff00;">b みかん</span><BR>c いちご<BR>d 郵便ポスト<BR>e 消防車<BR></td>
<td>b</td>
</tr>
</table></body></html>

どのようなVBSを組めばいいでしょうか?
問題は下にどんどん続いています

●質問者: takanii
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●300ポイント ベストアンサー

ちょっと発想を変えて、色を付けるタグを挟み込んでいくのではなくて、ページが表示されるときに javascript で色を付ける、というのでは、どうでしょうか?
質問にある HTML の前半に、以下の赤字の部分をペタッと貼るだけです。

<HTML>
<!-- ここから -->
<script>
window.onload = function() {
    var trs = document.getElementsByTagName("tr");
    for (var i = 0 ; i < trs.length ; ++i) {
        var ans = trs[i].children.item(3)
        re_ans = new RegExp("^[" + ans.innerHTML + "]");
        var ele_q = trs[i].children.item(2)
        var ele = ele_q.firstChild
        do {
            if (ele.nodeType == 3) {
                if (re_ans.exec(ele.nodeValue)) {
                    var wrap = document.createElement("span")
                    wrap.style.backgroundColor = "#ffff00";
                    ele_q.insertBefore(wrap, ele);
                    wrap.appendChild(ele);
                    ele = wrap;
                }
            }
        } while (ele = ele.nextSibling);
    }
}
</script>
<!-- ここまでを追加します -->
<body><table border="1">
<tr>
<td>第1回</td>
<td>1問目</td>
<td>赤いものはどれか<BR> <BR><BR>a りんご<BR>b みかん<BR>c いちご<BR>d 郵便ポスト<BR>e 消防車<BR></td>
<td>acde</td>
</tr>
<tr>
<td>第1回</td>
<td>2問目</td>
<td>オレンジ色のものはどれか1つ選べ。<BR> <BR>a りんご<BR>b みかん<BR>c いちご<BR>d 郵便ポスト<BR>e 消防車<BR></td>
<td>b</td>
</tr>
</table></body></html>

こうしておけば、後で設問が増えたときにも気にしなくて良いです。


jsFiddle で、動作を確認できるようにしました。
http://jsfiddle.net/a_kuma3/k62Cu/embedded/result/

こちらは動きが分かるように、「答えに色を付ける」というボタンを押したときに色を付けるようにしてあります。
回答に書いてあるコードは、ページが読み込まれたときに、色を付ける処理が動くようにしました。


a-kuma3さんのコメント
TABLE が見づらかったんで、border="1" だけ足しました。

mkonomiさんのコメント
完璧な回答です! takaniiさんはここで即終了して良いのではないでしょうか。

takaniiさんのコメント
大変助かりました!ありがとうございました!
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ