Question

(scope.arrays || []).forEach(function (a) {
    gridTemplate = gridTemplate +
        '<tr>' + 
        '   <td class="text-right">' + a.name + '</td>' +
        '   <td class="text-right">' + a.address + '</td>' +
        '   <td class="text-right">' + a.phno + '</td>' +
        '   <td class="text-right">' + a.city + '</td>' +
        '   <td class="text-right">' + a.pincode + '</td>' +
        '    <td> | </td>';
        '</tr>';
});

输出：

如果数组长度为2，则输出将如下所示。名称1地址1电话号码1城市1密码1 |名称2地址2电话号码2城市2密码2

如果我在循环内分配索引值并递增，并为偶数和非索引均值设置颜色，则颜色会被覆盖。

我想为每个数组值设置不同的颜色。例如，我想为“ name1 address1 phno1 city1 pincode1”设置粉红色，为“ name2 address2 phno2 city2 pincode2”设置粉红色 “

Answer 1

您可以在forEach中将第二个参数用作索引。使用Modulo(%)区分奇数行或偶数行并相应地应用样式。

var scope = {
  arrays: [
    {name: 'name1', address: 'address1', phno: 'phno1', city: 'city1', pincode: 'pincode1'}, 
    {name: 'name2', address: 'address2', phno: 'phno2', city: 'city2', pincode: 'pincode2'}
  ]
};

gridTemplate = "";
(scope.arrays || []).forEach(function(a, index) {
  gridTemplate = gridTemplate +
    '<tr style="color: ' + (index % 2 ? '#ff0000' : '#fcbffc') + ';">' +
    '   <td class="text-right">' + a.name + '</td>' +
    '   <td class="text-right">' + a.address + '</td>' +
    '   <td class="text-right">' + a.phno + '</td>' +
    '   <td class="text-right">' + a.city + '</td>' +
    '   <td class="text-right">' + a.pincode + '</td>' +
    '   <td> | </td>';
  '</tr>';
});

document.getElementById("table").innerHTML = gridTemplate;

<table id="table"></table>

对数组中的同一td应用不同的颜色

1 个答案: