Question

假设我有两个名为table1和table2的HTML表。如果我想拥有每个备选三行table2的不同背景，我怎么能用CSS实现呢？例如，将前3行的背景设置为蓝色，然后将另外3行设置为绿色，将另外3行设置为蓝色，再将另外3行设置为绿色，依此类推。基本上我想要交替的每三行有两种不同的背景颜色。我找到了偶数和奇数行或每第n行的CSS样式，但不是这种情况。我附上了样本表的截图。我不想像在这个代码中那样在单个行中进行硬编码，而是想在CSS样式中做到这一点。

＆＃13;

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 1px;
}

＆＃13;

<table id="table2">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr bgcolor="#dddddd">
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr bgcolor="#dddddd">
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr bgcolor="#dddddd">
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr bgcolor="#dddddd">
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr bgcolor="#dddddd">
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr bgcolor="#dddddd">
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
</table>

＆＃13;

感谢您提供任何帮助 ![enter image description here ] 1

Answer 1

您可以使用＆＃34; nth-child＆＃34;实现这一目标。

tr:nth-child(6n+1),
tr:nth-child(6n+2),
tr:nth-child(6n+3) {
  background: #dddddd;
}

尝试使用以下代码段

＆＃13;

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 1px;
}
tr:nth-child(6n+1),
tr:nth-child(6n+2),
tr:nth-child(6n+3) {
  background: #dddddd;
}

＆＃13;

<table id="table2">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td >Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td >Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td >Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td >Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td >Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td >Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
</table>

＆＃13;

Answer 2

您希望每三组行都有替代颜色。让我们解释一下css tr:nth-child(6n+1), tr:nth-child(6n+2), tr:nth-child(6n+3)的公式，其中n = 0,1,2,3 ......这个tr选择将从1-3,7-9开始....

同样tr:nth-child(6n+4), tr:nth-child(6n+5), tr:nth-child(6n+6)，其中n = 0,1,2,3 ......此tr选项将从4-6,10-12开始......

tr:nth-child(6n+1),
tr:nth-child(6n+2),
tr:nth-child(6n+3) {
  background: blue;
}

tr:nth-child(6n+4),
tr:nth-child(6n+5),
tr:nth-child(6n+6) {
  background: green;
}

table {
  color: #fff;
}

<table id="table2">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>a</td>
    <td>b</td>
    <td>c</td>
  </tr>
</table>

现在您将获得蓝色和绿色的替代颜色作为您的要求

Answer 3

您可以使用javascript设置背景颜色

 $('document').ready(function(){
     $('#table1 tr').each((index, value) => {
         if(index % 3 != 0){
             value.css({'background-color': '#0000FF'});
         }else{
             value.css({'background-color': '#00FF00'});
         }
     });
});

或定义两个css类

.blue {background-color: #0000FF;}
.green {background-color: #00FF00;}

并在您想要的所有表格中分配此类

Answer 4

您可以分隔标题和正文，并使用 nth-child 概念

  var t = [{ 
  a: 1, 
  b: 2 
}, { 
  a: 1, 
  c: 3 
}];
var result = {};
debugger;
for(var i=0; i<t.length; i++){
    for(var j in t[i]){
        if(result.hasOwnProperty(j)){
            result[j].push(t[i][j]); 
        }else{
            result[j] = [t[i][j]];
        }
    }
}
console.log(result);

Answer 5

Unknown function 'apoc.convert.fromJsonList'

如何在备用

5 个答案: