如何选择5个连续的行

时间:2017-01-18 14:08:32

标签: javascript jquery css

我有几张桌子。我想连续选择5个并给它们一个背景颜色,然后接下来的5个并给它们另一个背景颜色 - 比如偶数和奇数,但是有5个元素作为一个块。

这就是我试过的

var trs = $('table.small-only tr');
for (var i = 1; i < trs.length; i += 5) {
    if (i%2 == 0){
        // select even blocks
    }else {
        // select odd blocks
    }
}

但这不起作用。

如何选择包含5个trs的块并以正确的方式为偶数块和奇数块提供不同的背景颜色?

我找到了一个解决方法:

for (var i = 1; i < trs.length; i += 5) {
    trs.slice(i, i + 5).wrapAll("<div></div>");
}

div {
    &:nth-of-type(odd) {
        background: #f2f2f2 !important;
    }
}

但显然将div放在桌子上并不是一个好方法。

5 个答案:

答案 0 :(得分:4)

以下是我的例子:

&#13;
&#13;
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

var my_table_rows= $('.my-table tr');
var color;
for (var i = 0; i < my_table_rows.length; i++){
	if (i % 5 === 0) color = getRandomColor();
  my_table_rows.eq(i).css('background', color);
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="my-table">
  <tr><td>1</td></tr>
  <tr><td>2</td></tr>
  <tr><td>3</td></tr>
  <tr><td>4</td></tr>
  <tr><td>5</td></tr>
  <tr><td>6</td></tr>
  <tr><td>7</td></tr>
  <tr><td>8</td></tr>
  <tr><td>9</td></tr>
  <tr><td>10</td></tr>
  <tr><td>11</td></tr>
  <tr><td>12</td></tr>
  <tr><td>13</td></tr>
  <tr><td>14</td></tr>
  <tr><td>15</td></tr>
  <tr><td>16</td></tr>
  <tr><td>17</td></tr>
</table>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

要实现此目的,您可以循环遍历表中的tr元素,逐步调整每组所需的行数。然后,您可以使用slice()检索设置的行数,然后再调用addClass()。试试这个:

&#13;
&#13;
var groupSize = 5;
var classes = ['group1', 'group2'];
var $rows = $("table.small-only tr");

for(var i = 0; i < $rows.length; i += groupSize) {
  $rows.slice(i, i + groupSize).addClass(classes[i / groupSize % classes.length]);
}
&#13;
.group1 { background-color: #C00; }
.group2 { background-color: #0C0; }
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="small-only">
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr><td>4</td></tr>
    <tr><td>5</td></tr>
    <tr><td>6</td></tr>
    <tr><td>7</td></tr>
    <tr><td>8</td></tr>
    <tr><td>9</td></tr>
    <tr><td>10</td></tr>
    <tr><td>11</td></tr>
    <tr><td>12</td></tr>
</table>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

  

但很明显将div放在桌子上并不是一个好方法

不,它是无效的HTML。但是,您可以使用<tbody>代替<div>

表格可以包含任意数量的<tbody>元素

答案 3 :(得分:1)

你可以这样做

<强> HTML

<table class="table">
   <tr><td>test</td></tr>
   <tr><td>test</td></tr>
   <tr><td>test</td></tr>
   <tr><td>test</td></tr>
   <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
  <tr><td>test</td></tr>
 <tr><td>test</td></tr>
 <tr><td>test</td></tr>
 <tr><td>test</td></tr>
 </table>

<强> Jquery的

$(function(){
 var limit = 5;
 var arr = ['red','green','yellow','blue','orange'];
 $('.table tr').each(function(i,e){
     var ind = parseInt((i/limit));
     $(this).css('background',arr[ind]);
 })
 })

答案 4 :(得分:0)

您还可以使用CSS选择器:nth-child(xn):not()

tr:nth-child(10n - 5)~ tr:not(:nth-child(10n + 1)):not(:nth-child(10n + 2)):not(:nth-child(10n + 3)):not(:nth-child(10n + 4)):not(:nth-child(10n + 5)) {background-color:gray}

&#13;
&#13;
tr {
  background: turquoise;
  counter-increment: trs;
}
tr:nth-child(10n - 5)~ tr:not(:nth-child(10n + 1)):not(:nth-child(10n + 2)):not(:nth-child(10n + 3)):not(:nth-child(10n + 4)):not(:nth-child(10n + 5)) {
  background: tomato
}
/* check row numbers */

tr:before {
  content: counter(trs);
  display: table-cell;
  padding: 0.25em;
  border: solid;
  background: yellow;
}
tr:nth-child(odd):before {
  background: gray;
}
td {
  padding: 0.25em;
  border: solid;
}
&#13;
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
&#13;
&#13;
&#13;