0

StackOverflow の皆さん、こんにちは。

私が途方もなく愚かであることを前もってお詫びしますが、あなたの助けが必要です.

SQL クエリによって生成されたテーブルがあり、ユーザーは非表示のテキスト ボックスに値を渡す 1 つの行を選択できる必要があります。このビットは問題なく実行できましたが、ユーザーがどの行を選択したかを示す必要があります。ユーザーが気が変わって別の行を選択すると、新しい行だけが強調表示されます。

これはかなり基本的なものであることはわかっていますが、ロジックを理解できません。これまでのところ、私はこれを持っています:

function getOLBC(olbc)
{
    document.getElementById("ANSWER.TTQ.MENSYS.1.").value=olbc;
    var rows = document.getElementById("results").getElementsByTagName("tr").length;
    for (var i =0; i < rows; i++)
    {
        var answer = document.getElementById("ANSWER.TTQ.MENSYS.1.").value
        if (answer = olbc)
        {
            document.getElementById(olbc).style.background="red";
            document.getElementById(olbc).style.color="white";
        }
        else 
        {
            document.getElementById(olbc).style.background="white";
        }
    }
}

HTML は次のようになります。

    <tr class="unselected" id="AL-AAA98"onclick="getOLBC('AL-AAA98')"><td class="OLBC">AL-AAA98</td><td>AAAL</td><td>Grade A in Economics<br />Grade A in Mathematics<br />Grade A in Business Studies</td><td></td></tr>
    <tr class="unselected" id="AL-AAA77"onclick="getOLBC('AL-AAA77')"><td class="OLBC">AL-AAA77</td><td>AAAL</td><td>Grade A in Economics<br />Grade A in Mathematics<br />Grade A in Spanish</td><td></td></tr>
    <tr class="unselected" id="AL-AAA42"onclick="getOLBC('AL-AAA42')"><td class="OLBC">AL-AAA42</td><td>A*AAL</td><td>Grade A in Mathematics<br />Grade A in Human Biology<br />Grade A in Physics</td><td></td></tr>

誰でも助けることができますか？この質問の不自然さをお詫びします。

ありがとう！

4

3 に答える 3

2

これはあなたが探しているものだと思います... onclick dom 要素を削除しました (js を dom から分離することをお勧めします)。

jquery を使用: http://jsfiddle.net/cr1urhv6/

$("#myTable tr").click(function(e) {
  $("#myTable tr").removeClass("highlight");
  $(this).addClass("highlight");
});

または純粋な js を使用: http://jsfiddle.net/cr1urhv6/1/

var rows = document.querySelectorAll("#myTable tr");
for (var i = 0; i < rows.length; i++) {
    rows[i].addEventListener('click', function() {
        [].forEach.call(rows, function(el) {
            el.classList.remove("highlight");
            });
        this.className += ' highlight';
    }, false);
}

これにより、現在の強調表示が削除されます...そして、クリックした TR に強調表示クラスが追加されます。

于 2013-03-28T15:13:05.133 に答える
1

やってみる 

if (answer == olbc)

それ以外の 

if (answer = olbc)
于 2013-03-28T13:45:36.127 に答える
0

私は最終的に自分の解決策を見つけるのに十分なほどいじりました。これはおそらくSmernyの答えほどエレガントではありませんが、ここにあります:

    function getOLBC(olbc){
    var selectedCount = document.getElementsByClassName("selected").length;

    if (selectedCount <= 0)
        {
        document.getElementById("ANSWER.TTQ.MENSYS.1.").value=olbc;
        document.getElementById(olbc).className="selected"
        }
    else 
        {
        var selectedRow = document.getElementsByClassName("selected")[0].id
        document.getElementById(selectedRow).className="deselected";
        document.getElementById("ANSWER.TTQ.MENSYS.1.").value=olbc;
        document.getElementById(olbc).className="selected"
        }
于 2013-03-28T15:20:37.983 に答える