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 实际上包含在 TRs 中。我将其用作最后一行条目中包含数据的每一行的下拉列表。

当我单击一行时，具有类 c_sub_row 的下一行从 display:none 更改为 display:table-row，效果很好，但我需要它在发生这种情况时采用前一行的颜色。

最终更新 - 非常感谢 Jonathan Sampson

这是基于以下评论的最终解决方案：

$('.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");
});

或者您可能在 adiv内有 a tr，并且您希望 与的父级之前的div具有相同的背景颜色：trdiv

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

this当前div元素在哪里。

这里的魔力发生在用作方法的第二个参数的匿名函数中$.css。从它里面你可以做任何事情。例如，我们可以选择页面上的任何其他元素并复制其背景颜色：

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

同样，假设this是我们的目标div元素，它现在将具有与 相同的背景颜色<div class="someOtherDiv">...</div>。

更新

从评论中，听起来你有两个表格行（至少）。一个可见，下一个隐藏。在第二个中，您有一个 div。当您单击第一个（可见）表格行时，您希望显示第二个并将第一个 TR 的 bg 应用于第二个（现在可见）表格行中的 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 回答