0

divの背景色を、その前に直接進んだテーブル行の背景色と同じように動的に設定したいと思います。これが私がやりたいと思うことです：

$(this).next().css('background-color', $(this).css('background-color'));

このボードで答えを探していると、このスレッドが見つかりました。これは彼らのために働いた答えのようですが、私のものはうまくいきません。どんな提案もありがたく受け入れました。

編集

私が何をしようとしているのかを知りたがっている人のために、テーブルの本体を構築しているPHPコードを次に示します。

<?php
//  For every row past the first (header) row, create a table entry
    while ( $row = fgetcsv($handle) ) {

        echo "<tr class='c_edd_row'>";                      
        //  Build each cell         
        $num = count($row);         
        for ($c=0; $c < $num; $c++) {
            //  Do not echo entries 23 through 27 (unused cells)
           if ( $c < 23 || $c > 27 ) {
              echo "<td>".$row[$c]."</td>";
              //  save the last entry for the hidden div
              $validation_notes = $row[$c];
          }
        }
        echo "</tr>";
        echo "<tr class='c_sub_row'>
        <td colspan='42' class='c_notes_div'>
        <div class='c_notes_div'>".$validation_notes."</div>
        </td></tr>";
    }
?>

回答者は正しかった、私は自分の問題をあまりよく述べなかった。私が話していたdivは、実際にはTRに含まれています。これを、最後の行エントリにデータがあるすべての行のドロップダウンとして使用しています。

行をクリックすると、クラスc_sub_rowの次の行がdisplay：noneからdisplay：table-rowに変わります。これはうまく機能しますが、その場合は前の行の色を取得する必要があります。

最終更新-JonathanSampsonに感謝します

以下のコメントに基づいた最終的な解決策は次のとおりです。

$('.c_edd_row').on('click',  function(event) {
    var bg = $(this).css("background-color");
    $(this).next().css("background-color", bg);   //  colors the next row
    $(this).next().find('div').css("background-color", bg);  //  colors the div
});
4

3 に答える 3

2

divテーブルの行が要素の直前になることはありません。これは無効なテーブルマークアップになります。trの背景をその前のtrの背景に設定したい場合は、次のようにすることができます。

$("tr:eq(1)").css("background-color", function(){
  return $(this).prev().css("background-color");
});

または、div内にがあり、 ：の親の前にあるのと同じ背景色を使用しtrたい場合があります。divtrdiv

$(this).css("background-color", function(){
  return $(this).closest("tr").prev().css("background-color");
});

this現在のdiv要素はどこにありますか。

ここでの魔法は、$.cssメソッドの2番目の引数として使用される無名関数で発生します。その中から、あなたはほとんど何でもすることができます。たとえば、ページ上の他の要素を選択して、その背景色をコピーすることができます。

$(this).css("background-color", function(){
  return $(".someOtherDiv").css("background-color");
});

thisここでも、がターゲット要素であると仮定divすると、背景色はと同じになります<div class="someOtherDiv">...</div>。

アップデート

コメントから、（少なくとも）2つのテーブル行があるように聞こえます。1つは表示され、次は非表示になります。2つ目は、divがあります。最初の（表示されている）テーブル行をクリックすると、2番目の行を表示し、最初のTRのbgを2番目の（現在表示されている）テーブル行内のDIVに適用します。

$("tr:visible").on("click", function(event){
  var bg = $(this).css("background-color");
  $(this).next().show().find("div").css("background-color", bg);
});
于 2012-05-14T05:26:10.737 に答える
1 
$(document).ready(function(){

 $(".your_table_class tr:last-child").each(function(){
    $(this).parent().next().css('background-color', $(this).css('background-color'));
 })

});

これは、次.your_table_classのdivが色付けされるすべてのテーブルで使用されるクラス/ダミークラスです。divはテーブルのすぐ隣の要素である必要があることに注意してください。

また、テーブルに<tbody>タグが含まれている場合、行は次のようになります。$(this).parent().parent().next().css('background-color', $(this).css('background-color'));

于 2012-05-14T05:30:46.900 に答える
1

jsBinデモ

var neededBG = $('#children_table tr').css('background-color');   // cache the needed color
$('#children_div').css({backgroundColor: neededBG });             // use of the needed color
于 2012-05-14T05:36:00.873 に答える