时间戳

首页 > 解决方案 > 连续更改每个其他 div 的背景颜色

javascript - 连续更改每个其他 div 的背景颜色

问题描述

我有下表桌子其中的div元素根据数组中的项目数重复。

表中只有一个tr，第 1 和第 2与行中的td第 3 和第 4 无关td。

在一个td我重复div一个数组的长度。在图像中，第一列之间Balance B/d和之间的数据是一个数组，并且有自己的数组等等。IncomeIncome

我已经这样做了，但这不起作用，正如您在图像中看到的那样。我试图将shaded-rowusing添加ng-class到偶数行，但这不起作用。

也许我可以做.statement-item:nth-child(even)，但statement-container必须statement-item应用阴影行。我应该删除statement-container父母并做.statement-item:nth-child(even)还是有其他方法？

    <tr>
   <!-- <td class="text-center sl-no-td">{{($index + 1)}}</td> -->
   <td class="v-align-top zeroPadding">
      <!--Receipts-->
      <!--Opening balance-->
      <div ng-show="balanceArray.length" class="statement-container">
         <div class="statement-item">
            <strong>Balance B/d</strong>
         </div>
         <div ng-repeat="subItem in balanceArray" ng-class="{'shaded-row': $index % 2 == 0}" class="statement-item">
            {{subItem.ledger_name}} 
         </div>
      </div>
      <!--End Opening balance-->
      <!--Income-->
      <div ng-show="incomeArrayForReceiptStmt.length" class="statement-container">
         <div class="statement-item">
            <strong>Income</strong>
         </div>
         <div ng-repeat="subItem in incomeArrayForReceiptStmt" ng-class="{'shaded-row': $index % 2 == 0}" class="statement-item">
            {{subItem.ledger_name}}
         </div>
      </div>
      <!--End Income-->

      <!--Receipts-->
   </td>
   <td class="journal-type-td v-align-top  zeroPadding">
      <!--Receipts Amount-->
      <!--Opening balance-->
      <div class="statement-item invisible">
         <strong>Balance B/d</strong>
      </div>
      <div ng-show="balanceArray.length" class="statement-container">
         <div ng-repeat="subItem in balanceArray" ng-class="{'border-top-statement': $index == 0, 'shaded-row': $index % 2==0}" class="text-right statement-item">
            {{subItem.opening_amount | amountFormatFilter}}
         </div>
      </div>
      <!--End Opening balance-->
      <!--Income-->
      <div ng-show="incomeArrayForReceiptStmt.length" class="statement-container">
         <div class="statement-item invisible">
            <strong>Income</strong>
         </div>
         <!-- <strong>Income</strong> -->
         <div ng-repeat="subItem in incomeArrayForReceiptStmt" ng-class="{'border-top-statement': $index == 0, 'shaded-row': $index % 2==0}" class="text-right statement-item">
            {{subItem.paid | amountFormatFilter}}
         </div>
      </div>
      <!--End Income-->

      <!--Payments Amount-->
   </td>
   <td class="journal-type-td v-align-top  zeroPadding">
      <!--Payments-->
      <!--Expenses-->
      <div ng-show="expenseArrayForReceiptStmt.length" class="statement-container">
         <div class="statement-item">
            <strong>Expenses</strong>
         </div>
         <div ng-repeat="subItem in expenseArrayForReceiptStmt"  ng-class="{'shaded-row': $index % 2 == 0}"  class="statement-item">
            {{subItem.ledger_name}}
         </div>
      </div>
      <!--End Expenses-->
      <!--Assets-->
      <div ng-show="assetArray.length" class="statement-container">
         <div class="statement-item">
            <strong>Assets</strong>
         </div>
         <div ng-repeat="subItem in assetArray"  ng-class="{'shaded-row': $index % 2 == 0}" class="statement-item">
            {{subItem.ledger_name}}
         </div>
      </div>
      <!--End Assets-->

      <!--Closing balance-->
      <div ng-show="balanceArray.length" class="statement-container">
         <div class="statement-item">
            <strong>Balance C/d</strong>
         </div>
         <div ng-repeat="subItem in balanceArray"  ng-class="{'shaded-row': $index % 2 == 0}" class="statement-item">
            {{subItem.ledger_name}}
         </div>
      </div>
      <!--End Closing balance-->
      <!--End Payments-->
   </td>
   <td class="journal-type-td v-align-top  zeroPadding">
      <!--Receipts Amount-->
      <!--Expenses-->
      <div ng-show="expenseArrayForReceiptStmt.length" class="statement-container">
         <div class="statement-item invisible">
            <strong>Expense</strong>
         </div>
         <div ng-repeat="subItem in expenseArrayForReceiptStmt" ng-class="{'border-top-statement': $index == 0, 'shaded-row': $index % 2==0}" class="text-right statement-item">
            {{subItem.paid | amountFormatFilter}}
         </div>
      </div>
      <!--End Expenses-->
      <!--Assets-->
      <div ng-show="assetArray.length" class="statement-container">
         <div class="statement-item invisible">
            <strong>Assets</strong>
         </div>
         <div ng-repeat="subItem in assetArray" ng-class="{'border-top-statement': $index == 0, 'shaded-row': $index % 2==0}" class="text-right statement-item">
            {{subItem.paid | amountFormatFilter}}
         </div>
      </div>
      <!--End Asset-->

      <!--Closing balance-->
      <div ng-show="balanceArray.length" class="statement-container">
         <div class="statement-item invisible">
            <strong>Closing</strong>
         </div>
         <div ng-repeat="subItem in balanceArray" ng-class="{'border-top-statement': $index == 0, 'shaded-row': $index % 2==0}" class="text-right statement-item">
            {{subItem.closing_amount | amountFormatFilter}}
         </div>
      </div>
      <!--End Closing balance-->
      <!--End Payments Amount-->
   </td>
</tr>

标签： javascripthtmlcssangularjs

解决方案

这是一个想法，创建一个包含随机颜色数组的函数并随机选择一个。如下所示：

addColor() {
    let arr = ['#ffffff', '#000000', '#ff0000', '#00ff00', '#0000ff'];

    let color = arr[Math.floor(Math.random() * arr.length)];

    return color;
}

或者您可以创建一个全局变量数组，其中包含一个看起来像的对象数组

var arr = [{color: '#fff', used: false}, {color: '#000', used: true}];

然后，您可以创建在该数组上运行 for 循环的函数：

let color = '';

for(let i = 0; i < arr.length; i++) {
  if(!arr[i].used) {
    arr[i].used = true;
    color = arr[i].color;
    break;
  }
}

return color;

我认为您可以使用类似的东西ng-style="{'background-color' : addColor()}"（我对角度不太熟悉，抱歉。）

希望这有助于让你的球滚动。

推荐阅读