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を組めばいいでしょうか?
問題は下にどんどん続いています

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/09/07 14:51:37
  • 終了:2013/09/07 19:27:56

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4537ベストアンサー獲得回数18882013/09/07 18:22:22

ポイント300pt

ちょっと発想を変えて、色を付けるタグを挟み込んでいくのではなくて、ページが表示されるときに 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/

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

他1件のコメントを見る
id:mkonomi

完璧な回答です!

takaniiさんはここで即終了して良いのではないでしょうか。

2013/09/07 18:43:15
id:takanii

大変助かりました!ありがとうございました!

2013/09/07 19:28:14
  • id:mkonomi

    プリプロセッサーで予めHTMLソースを加工(※)し、それをブラウザーで表示するのではなく、

    HTMLソースは現状のままで、別にVBSを用意しておき、ブラウザーで表示するときに色を
    付けるのですね。

    (※)例えばテキストエディタのマクロを用いて
    各<tr>内の
    4つ目の<td>の内容を参考にして、
    3つ目の<td>のコードを加工する。
  • id:takanii
    そのようなコードを書くのに参考になりそうなコードとかないでしょうか?
  • id:mkonomi
    例えば、秀丸エディタのマクロを用いれば簡単に実現できます。

    しかし、a-kuma3さんの回答の方が格段にスマートです。
  • id:mkonomi
    a-kuma3さん

    > jsFiddle で、動作を確認できるようにしました。

    jsFiddle ってポピュラーなツールですか?
    jsFiddleにはどんな特徴がありますか?

    使用するにはユーザ登録が必要でしょうか?

  • id:a-kuma3
    >jsFiddle ってポピュラーなツールですか?
    世間的にはどうなのかよく分からないんですけど、ここ人力検索だと、動作確認をしてから回答を投稿するタイプの方だと、それなりに使っているように思います。
    jsdo.it とか、他にも似たようなサイトがあるのですが、jsFiddle が使いやすいと思ってます。


    >jsFiddleにはどんな特徴がありますか?
    jQuery など、ライブラリの指定ができることが一番の特徴だと思います。
    自分でライブラリをホストしてくれているところの URL を調べて、script タグを書けば良いだけなんですけど、そのひと手間が省けます。
    逆に、コードを共有するサイトという意識が低いと思います。
    先に出した jsdo.it は、トップページが他の人が書いたコードが見られるような感じですが、jsFiddle はいきなりコードの入力です。

    後、Ajax を使うコードのテストが、簡易的にできます。
    普通だと、別にサーバを用意しなければいけないところですが、jsFiddle だとリクエストを出す URL にデータを埋め込んで、簡易的なテストができます。


    >使用するにはユーザ登録が必要でしょうか?
    ユーザ登録しなくても使えます。
    登録すると、自分が書いた一覧が見られるという程度で、書き捨てるコードであればユーザ登録しなくても、十分に使えます。


    全然使ってなくて、しばらくぶりに jsdo.it に行ってみたら、ログインの方法が変わってました。
    昔は、けっこう重たいイメージがあったのですが、それほどでもなくなってました。
  • id:mkonomi

    a-kuma3さん

    丁寧で詳細な説明をありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません