0

ある種の「ツリー」テーブルを作成しようとしています。

tr間の関係は次のとおりです。

+----------+     +----------+     +----------+
| charges  | 1:n | services | 1:n | products | 
+----------+     +----------+     +----------+

したがって、すべての請求レコードにはN個のサービスがあり、すべてのサービスは製品で構成されています。

つまり、朝食の料金は一般的な朝食（あなたの食事に対応する）を請求し、この朝食はオレンジジュースとパンのスライスで作られています。

最初の行を特別な色にしようとしていましたが、ユーザーが下矢印アイコンをクリックすると、サービスに対応する行が表示され（この例では、視覚化のために色を変更するだけです）、製品行についても同様です。

ここに画像の説明を入力してください

赤い丸（料金ID 10）の矢印をクリックすると、そのためのすべての「子供」サービス、料金...が表示されますが、（赤の色）も表示されます。 ..¬¬）料金番号12のサービス...私が知る必要があるのは、ループがそれぞれ料金12の行に遭遇したときに、色付け（表示）を停止する方法です。したがって、黒い円の行は赤い背景に変更しないでください。

これを行うために、料金、サービス、および製品の行は異なるクラスを持っているため、jQueryはそれらを見つけることができます。

 $(".listar-servicios").click(function(event){
   event.preventDefault();
   var flag = 1;
   $(this).parent().parent().css("color","green").siblings('.fila-servicio').each(function(){    
     if(!$(this).hasClass('.fila-servicio') && flag !== 1 && $(this).hasClass('.fila-consumo')){
        $(this).css('background-color', 'green');
        flag = 0;
     }else{
        $(this).css('background-color', 'red');     
        flag = 0;
     }
  });
});

ここで実際の例と私のコードを見ることができます：JSBIN

長い質問でごめんなさい。

4

2 に答える 2

1

ここに解決策があります

        $(".listar-servicios").click(function(event){
           event.preventDefault();
           $(this).parent().parent().css("color","green").siblings('.fila-servicio,.fila-consumo').each(function(){
              if($(this).hasClass('fila-servicio')){
                  $(this).css('background-color', 'red');   
              }else if($(this).hasClass('fila-consumo')){
                return false;
              }          
          });
       });

あなたのコードにはほとんど問題がありませんでした

  • hasClass メソッドで特定のクラスをチェックする場合、ドット (.) を使用する必要はありません。Jquery セレクターだからです。
  • 兄弟では、クラス 'fila-consumo' を持つ兄弟を選択する必要があります。そうすれば、各ループ内でその要素を見つけることができます。

return false を使用する必要があるループを中断するために、有用だとは思わないフラグを削除しました。

アップデート -

兄弟の代わりに別のメソッド「nextAll」を使用して、完全に機能させることができます。このコードをテストしたところ、矢印ボタンをクリックしたときにチャージ ID 12 で機能しないことがわかりました。最初の兄弟自体は、クラス fila-consumo を持つ現在の行であるためです。そこで、必要なクラスを持つセレクター「tr」で nextAll を使用しました。以下のコードは完全に機能します。

  $(".listar-servicios").click(function(event){
      event.preventDefault();
      $(this).parent().parent().css("color","green").nextAll('tr.fila-servicio,.fila-consumo').each(function(){
        if($(this).hasClass('fila-servicio')){
            $(this).css('background-color', 'red');   
        }else if($(this).hasClass('fila-consumo')){
            return false;
        }

      });
    });
于 2012-07-06T05:34:37.247 に答える
0

私が考えつく最も簡単な方法は、HTML5 のデータ オブジェクトを使用することです。

とにかく各行をループしているので、データ オブジェクト (data-"variable"="##") を追加し、それに対してチェックします。

<tr class="fila-servicio" data-charge="10">...</tr>

jQuery の「データ」メソッドを使用すると、データ値が現在の ID と一致するかどうかを簡単に抽出して確認できます。

$(this).closest("fila-consumo").css("color","green").siblings('.fila-servicio').each(function(){
    // Get the id of the row (preferably store this as an id or data object as well)
    var rowId=$(this).closest('td.oculto').text();
    if(!$(this).hasClass('.fila-servicio') && flag !== 1 && $(this).hasClass('.fila-consumo') && $(this).data("charge")!=rowId){
        $(this).css('background-color', 'green');
        flag = 0;
    }else{
        $(this).css('background-color', 'red');     
        flag = 0;
    }
 });

注: これは私の頭の中から外れているので、すべてが正しいかどうかはわかりませんが、うまくいくはずです。

于 2012-07-06T05:21:03.260 に答える