0

単純なリスト構造からテーブルを作成しました。 

<html>
    <body>
      <ul id="Column:0">
        <li id="Row:0></li>
        <li id="Row:1></li>
        <li id="Row:2></li>
        <li id="Row:3></li>
        <li id="Row:4></li>
      </ul>
      <ul id="Column:1">
        <li id="Row:0></li>
        <li id="Row:1></li>
        <li id="Row:2></li>
        <li id="Row:3></li>
        <li id="Row:4></li>
      </ul>
      <ul id="Column:2">
        <li id="Row:0></li>
        <li id="Row:1></li>
        <li id="Row:2></li>
        <li id="Row:3></li>
        <li id="Row:4></li>
      </ul>
    </body>
</html>

次に、すべての行に単純な.mouseover（）を追加します。たとえば、ホバーしたときに行の色を変更します。そして、これは私がこれまでに理解したことです：

for (var i = 2;  i <= _totalRows; i++) {
    var row = $('#TimeTable ul li:nth-child(' + i + ')')
    row.each(function() {
        $(this).click(function(evt) {
            var $target = $(evt.target);
            console.log($target.nodeName)
            if (evt.target.nodeName == 'DIV') {
                console.log(evt.parent('li'));
            }
        }); //end $(this).click(fn)
    }); // end each(fn)
}

<li>：nth-​​child（i）に一致するすべてのオブジェクトのセットを取得します。ここiで、は行番号です。

var row = $('#TimeTable ul li:nth-child(' + i + ')')

今、私はこのセットを繰り返して、すべてに.click（fn）を追加します<li>。これは正常に機能します。すべてのセルには、.click（fn）がアタッチされています。しかし、次のクリックで何をすべきかは、私が今数時間立ち往生しているところです：

var $target = $(evt.target);
console.log($target.nodeName)
if (evt.target.nodeName == 'DIV') {
    console.log(evt.parent('li'));
}

私は単にそれを実行させません。これは私がすでにここで試したいくつかのことの最後であるため、実際にはこのジブリッシュを無視することができます。

私がやろうとしているのは<li>、id ='Row：X'を持つすべてを選択し、そのCSSを操作することです。私が今まで持っていた最高のものは、セルをクリックできることでしたが、このセルがどの行にあるかに関係なく、最後のセルは色付けされます。iそのときに行インデックスとして使用したことを覚えているので、ここでもイベント処理についての理解が不足している可能性があります。

4

3 に答える 3

2

IDではなく要素の重複グループにはクラス名を使用します。行1に「Row1」のクラスを指定すると、セレクターは単純に次のようになります。

$('.Row1')

それで：

$('#TimeTable li').removeClass('highlight');
$('.Row1').addClass('highlight');
于 2012-09-10T17:16:29.883 に答える
0

マウスオーバーで色を変更したいだけの場合：

$('#TimeTable ul li').mouseover(function(){
    $(this).css('background','red');
});

$('#TimeTable ul li').mouseout(function(){
    $(this).css('background','green');
});
于 2012-09-10T17:14:46.717 に答える
0

  1. IDを次のようにします：C1R1（Column1Row1）など

  2. JQueryは「jqueryeach」を読み取り/グーグルアップします

  3. JQuery読み取り/グーグルアップ「jqueryバインドクリック」

  4. JQueryは「jqueryattr」と「JQueryval（）」を読み取り/グーグルアップします

これはあなたにあなた自身を書くための知識を与え、そして最も重要なことにそれをよりよく理解するでしょう。次のことを実現する必要があります（閉じるがforループは必要ありません）。

JQueryがクリックイベントハンドラーを各LIにアタッチし、クリックが発生したときにIDを取得できるリスト。

PS。テーブルには時間と場所があり、CSSよりもデータの表示に9/10倍優れています。複雑な複数列の行があり、高さを調整したいがJSで問題を修正したり、何かスマートなことをしたりしたくない場合は、テーブルとcssを使用できます。TRにカーソルを合わせると、マウスを上下に移動できます。高さも一定です。

PS。PS。データが動的でデータベースからのものであり、行全体がデータベースからのIDである場合、私はこれにhtml ID属性を使用することを避け、自分で作成する傾向があります。これはattr（ "myattribute"）;を介して取得できます。

CSSとIDに関する注意：IDの標準的な方法は、ページで1回使用する必要があります。繰り返し可能なコンテンツのクラス

幸運を。

于 2012-09-10T17:16:20.797 に答える