使用JQuery将附加行中某些单元格的背景颜色更改为表

问题描述

我正在向表中添加一行。如何更改一组单元格中该行的背景颜色。 Say列有25列;从17到22开始的列需要更改背景颜色。

I'm appending a row to a table. How can I change the background color in that row for a group of cells. Say column has 25 columns; columns starting from 17 till 22 needs a background color change.

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

This is what I tried so far:

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

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

Here I use Childeren 'td' which all cells in row got colored instead I need a particular cells background need to changed as per ID of column.

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

I added my Html code You can clarify this:

<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>

推荐答案

您可以尝试这种方式：

/* 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>

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

So as a first step we need to find starting index and ending index in which we want to fill the background color.

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

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

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

now we can iterate through each row and select columns based on starting index and last index:

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

其中商品是行/ tr 本身也是如此，使用Jquery ：lt 和 ：gt 选择器我们可以在这些索引和应用css之间获得子项（ td ）。

in which item is row/tr itself so from that using Jquery :lt and :gt selector we can get children(td) between those index and apply css on it.

：lt（index）：gt（index）将给出这个索引之间数组中的所有元素，因为我们也想要startIndex和endingIndex以及我们递增和递减相应地。

:lt(index):gt(index) will gives all the elements in an array between this index as we also want startIndex and endingIndex along with this we incremented and decremented accordingly.

这篇关于使用JQuery将附加行中某些单元格的背景颜色更改为表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！