Question

我在一张桌子上附加一行。如何更改一组单元格中该行的背景颜色。 Say列有25列;从17到22开始的列需要更改背景颜色。

这是我到目前为止所尝试的：

$("#table1").append(row1);
$(row1).children('td')
    .not('td:eq(0)')
    .not('td:eq(0)')
    .css({ "background-color": workcolor });

在这里，我使用Childeren'td'，其中所有行中的细胞都变色，而我需要根据列的ID更改特定的细胞背景。

我添加了我的Html代码你可以澄清一下：

<table class="table table-striped" id="table1">
  <thead>
    <tr>
      <th class="" id="profilepic">Image</th>
      <th id="empName">Employee</th>
      <th id="0">00:00</th>
      <th id="1">01:00</th>
      <th id="2">02:00</th>
      <th id="3">03:00</th>
      <th id="4">04:00</th>
      <th id="5">05:00</th>
      <th id="6">06:00</th>
      <th id="7">07:00</th>
      <th id="8">08:00</th>
      <th id="9">09:00</th>
      <th id="10">10:00</th>
      <th id="11">11:00</th>
      <th id="12">12:00</th>
      <th id="13">13:00</th>
      <th id="14">14:00</th>
      <th id="15">15:00</th>
      <th id="16">16:00</th>
      <th id="17">17:00</th>
      <th id="18">18:00</th>
      <th id="19">19:00</th>
      <th id="20">20:00</th>
      <th id="21">21:00</th>
      <th id="22">22:00</th>
      <th id="23">23:00</th>
    </tr>
    </thead>
  <tbody id="body1">
    <!-- appending rows goes here !-->
  </tbody>
</table>

Answer 1

您可以尝试.filter()

$(row1).find('td').filter(function(index){
 return parseInt(this.id) >= 17 && parseInt(this.id) <= 22
}).css({ "background-color": yellow});

使用td id this.id的上述示例如果使用td index

，可以使用传递过滤器函数的index更改它

您仍然可以在.css()

之前使用filter()为行设置所有td

$(row1).find('td').css({ "background-color": workcolor }).filter(function(){
   return parseInt(this.id) >= 17 && parseInt(this.id) <= 22
}).css({ "background-color": yellow});

注意：

如果您要查找行ID而不是td id

.find('td')

如果您想通过td引用行，可以继续使用.find('td')，在过滤器上可以使用parseInt($(this).closest('tr').attr('id'))

直到您的问题更新 ..您只能使用css来执行此操作

th:nth-child(n + 20):not(:nth-child(26)),
td:nth-child(n + 20):not(:nth-child(26)){
  background : yellow;
}

说明：

为什么(n + 20)？因为nth-child索引从1开始..所以如果你计算id为17的元素，你会发现它的索引是20，n + 20将选择索引为20及以上的元素 :not(:nth-child(26))不是最后一栏

Answer 2

您可以尝试这种方式：

/* added this loop to append tr you can ignore this loop as this only for demo */
for(i=0; i<=10; i++){
  var row = $('<tr></tr>');
  for(j=0; j<=25; j++){
    row.append('<td>'+j+'</td>');
  }
  $("#table1 tbody#body1").append(row);
}
// demo code ends here

// actual logic starts here

var startIndex = $('#table1 thead th').index($('#table1 thead th[id=17]')) // get the index of id 17

var endingIndex = $('#table1 thead th').index($('#table1 thead th[id=22]')) // get the index of id 22

// iterates through all rows.
$.each($('#table1 #body1 tr'), function(i, item) { 
  // update background-color of td between the index values 17 and 22   
  $(item).children('td:lt('+(endingIndex + 1)+'):gt('+(startIndex - 1)+')').addClass('highlight') 
});

.highlight{background-color: yellow;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-striped" id="table1">
  <thead>
    <tr>
      <th class="" id="profilepic">Image</th>
      <th id="empName">Employee</th>
      <th id="0">00:00</th>
      <th id="1">01:00</th>
      <th id="2">02:00</th>
      <th id="3">03:00</th>
      <th id="4">04:00</th>
      <th id="5">05:00</th>
      <th id="6">06:00</th>
      <th id="7">07:00</th>
      <th id="8">08:00</th>
      <th id="9">09:00</th>
      <th id="10">10:00</th>
      <th id="11">11:00</th>
      <th id="12">12:00</th>
      <th id="13">13:00</th>
      <th id="14">14:00</th>
      <th id="15">15:00</th>
      <th id="16">16:00</th>
      <th id="17">17:00</th>
      <th id="18">18:00</th>
      <th id="19">19:00</th>
      <th id="20">20:00</th>
      <th id="21">21:00</th>
      <th id="22">22:00</th>
      <th id="23">23:00</th>
    </tr>
  </thead>
  <tbody id="body1">

  </tbody>
</table>

因此，作为第一步，我们需要找到我们想要填充背景颜色的起始索引和结束索引。

 var startIndex = $('#table1 th').index($('#table1 th[id=17]')) // index is 19

 var lastIndex = $('#table1 th').index($('#table1 th[id=22]')) // index is 24

现在我们可以迭代每一行并根据起始索引和最后一个索引选择列：

$.each($('#body1 tr'), function(i, item) {  
  $(item).children('td:lt('+(endingIndex + 1)+'):gt('+(startIndex -1)+')').css('background-color', 'yellow') 
});

其中项是行/ tr本身就是使用Jquery :lt 和 :gt 选择器我们可以在这些索引之间获取子项（td）并在其上应用css。

:lt(index):gt(index)将在此索引之间提供数组中的所有元素，因为我们还需要startIndex和endingIndex，因此我们会相应地递增和递减。

Answer 3

您可以使用gt和lt选择器的组合：

$("#table1").append(row1);
$(row1).children('td:gt(17):lt(22)').css('background-color', workcolor);

使用JQuery

3 个答案: