在javascript中交替行颜色答案

【问题标题】：Alternating row colours in javascript在javascript中交替行颜色
【发布时间】：2015-06-10 19:33:03
【问题描述】：

我正在开发一个股票代码（在我学习 javascript 的过程中缓慢但肯定地）

它似乎运行良好，我现在正在尝试设置代码的样式。

当前代码使用 google Finance 提取股票数据，然后 html 在 div 代码中返回此数据。还有一个选取框滚动效果和一些 CSS 样式。我熟悉偶数和奇数 css 规则，这将使每个交替表行都具有不同的颜色，因此看起来更容易，但我相信我需要在 javascript 中实现这一点，因为这是创建数据行的地方。 jquery 不使用表，所以我有点不确定如何做到这一点，我所有的尝试都失败了

我已将当前项目附加为 js fiddle 和我正在尝试实现的示例

示例：http://www.w3.org/Style/Examples/007/evenodd.en.html

JS 小提琴：https://jsfiddle.net/wLsy7zak/

var gstock = ["EPA:PIG","LON:AHT","NYSE:URI","NYSE:TEX" ,"NYSE:CAT", "NASDAQ:HEES",  "VIE:PAL" ];
$(document).ready(function () {
       for (var i = 0; i < gstock.length; i++) {
        $.getJSON("https://finance.google.com/finance/info?client=ig&q="+gstock[i]+"&callback=?", function (response) {
            var stockInfo1 = response[0];
            var divContainer =  $('*[data-symbol="' + stockInfo1.t +'"]');

            var stockString1 = '<div class="stockWrapper">' + divContainer.data('title') + ':';
            var stockName1 = stockInfo1.t;             
            var stockChange ="";
            stockString1  += '<span class="stockSymbol "> '  +  stockInfo1.t + ' </span>';
            stockChange += '<span class="stockPrice "> '  +  stockInfo1.l  + '</span>';
            stockChange += '<span class="stockChange "> '  +  stockInfo1.c + '</span>';
            stockString1 += stockChange + '</div>';
            $("#title").append("<div>" + divContainer.data('title') + "</div>");
            $("#symbols").append("<div><b>" + stockInfo1.t + "</b></div>");

            $("#liveData").append("<div>" + stockChange + "</div>");
            divContainer.append(stockString1);

        });
    }
});

我想问题是：如何让滚动条来交替行颜色，使其看起来更好看。

感谢您的宝贵时间

【问题讨论】：

这是表格数据，您有什么理由不使用表格吗？
因为我正在努力将 javascript 放入表格中

标签： jquery css

【解决方案1】：

您可以为此使用 CSS 没问题：

marquee > div > div > div:nth-child(odd) {
  background: #eee;
}

但是，由于您的标记的性质，您的“单元格”之间会有间隙。您可以从列中删除填充并将其应用于单元格以消除白色间隙：

marquee > div > div > div {
    padding-right: 15px;
}

JSFiddle

【讨论】：

这很好，但颜色不会影响填充。这意味着颜色行被分解。您也可以在 JSfiddle 中对此进行测试。感谢帮助
这是因为每个单独的“单元格”都是彩色的，而不是行。使用当前的标记，这是不可能的。您可以从列中删除填充并将其应用于单元格。
@George 为什么这不起作用$(".stockWrapper:even").css("background-color","blue"); $(".stockWrapper:odd").css("background-color","yellow");
@papsk 因为表格不在行中，而是在列中。

【解决方案2】：

看到这个jsfiddle

检查这是否会帮助您通过使用脚本和 css 来实现放入脚本

if(k%2){
           var cclass="redcolor";
       }else{
            var cclass="bluecolor";
       }
        k++;

就像在 jsfiddle 演示中一样

并使用 css 设置特定类的样式

【讨论】：