将背景颜色从单元格复制到另一个表格单元格

时间:2012-09-12 15:33:38

标签: jquery css

我得到了这个工作,但解决方案感觉有点所以如果有人可以看看它并给出如何优化方法的提示,那将是很棒的。

我有一个特定的起始表,背景颜色设置。在它下面是没有背景颜色的类似表,实际上这些是为我通过ajax检索的数组中的每个记录动态创建的。该脚本的目的是复制结果网格中每个的背景颜色:

for (var i = 2; i < 34; i++) {
    var c = $('table tr td:nth('+ i + ')').css('background-color');        
    $('table tr td:nth-child('+i+')').css('background-color',c);
}

我现在首先从第一个表中找到背景颜色,然后在循环复制中找到找到的颜色。

小更新:它至少需要在IE 8中工作。

可在此处找到一个示例:http://jsfiddle.net/KvdM/9RRfU/

2 个答案:

答案 0 :(得分:0)

您也可以考虑使用CSS3 col和nth-child。请参阅红色cols示例:

http://jsfiddle.net/pdejuan/9RRfU/5/

有关Col elements

的其他信息

答案 1 :(得分:0)

以下代码抓取第一行表格单元格并迭代它们。它缓存jQuery包装的this隐式参数,并在表中获取它的列位置以及它的background-color。接下来,它使用相同的background-color更新该位置的其余表格单元格。

$(function() {
    $( "tr:first td" ).each(function() {
        var $this = $( this ),
            index = $this.index(),
            color = $this.css( "background-color" );

        $( "td:nth-child(" + index + ")" ).css( "background-color", color )
    });
});

这是一个带有上述代码段的jsFiddle ... http://jsfiddle.net/fpVuW/

您可以考虑在表中添加一个特殊类并更新jQuery,以便它只操作这些表,否则如果页面上还有其他表,它们也会被更改。

另一个解决方案是创建一个函数或插​​件,将一个表复制到另一个特定的表,然后为每个表调用函数/插件。这样你就可以更好地控制哪些表发生了变化。