Change background color for certain cells in the appending row to a table using JQuery

Question

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 });

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.

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>

No using a for loop which has iterate through a list of item each item added as a new row.In that item a property "backcolor" used using that rows certains cells backcolor need to be setted. Are you got now? — Jack Sparrow, Mar 22 '18 at 13:58
Do you need it for just that row? (ie only in certain cases) - if it's for every row, then you'd be better off with css: https://stackoverflow.com/questions/15639247/css-selector-for-nth-range — freedomn-m, Mar 22 '18 at 14:10
What do you mean by "as per ID of column"? Maybe include some html? If you have control over the HTML, then it'll be easier to just give the columns you want a specific css class and style them that way, eg `..` `.work { background-color: green }` — freedomn-m, Mar 22 '18 at 14:19

Mohamed-Yousef · Answer 1 · 2018-03-22T19:55:45.437

3

You can try .filter()

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

The above example using td id this.id you can change it with index passing on filter function if you working with td index

and you can still set the all td for a row by using .css() before filter()

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

Notes:

No need to use .find('td') if you're looking for row id not td id
If you want to reference the row by td you can keep using .find('td') and on filter you can use parseInt($(this).closest('tr').attr('id'))

Up to your question update .. you can use just css to do that

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

Explanation:

Why (n + 20)? because nth-child index is starting from 1 .. so if you count the element with id 17 you'll find its index is 20 and n + 20 will select the element with index is 20 and above and :not(:nth-child(26)) to not the last column

edited Mar 22 '18 at 19:55

answered Mar 22 '18 at 14:01

Mohamed-Yousef

23,946
3
19
28

2

`.filter(function(index element){})` already passes an index, no need for `$(this).index()` – freedomn-m Mar 22 '18 at 14:08
@freedomn-m you're right .. this my first time know about passing index on filter .. thanks :-) – Mohamed-Yousef Mar 22 '18 at 14:10
Many of the filter/map/etc functions include `index,element` but as they also set `this`, it's easy just to use `$(this)...` – freedomn-m Mar 22 '18 at 14:12
your words will remind me when coding .. Thanks @freedomn-m :) – Mohamed-Yousef Mar 22 '18 at 14:16
what does this.id means here? also index means? – Jack Sparrow Mar 22 '18 at 14:57
`this.id` return the element id which use filter for .. index is the element position .. see my update answer .. I think just css will work for you @JagatheesWaran – Mohamed-Yousef Mar 22 '18 at 19:51

Vishal Taj PM · Accepted Answer · 2018-03-22T16:49:45.993

You can try this way :

/* 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') 
});

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

score 0 · Answer 3 · answered Mar 22 '18 at 14:03

0

You could use a combination of the gt and lt selectors:

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

answered Mar 22 '18 at 14:03

Jacob van Lingen

8,989
7
48
78

Instead 17 and 22 hardcoded,Could I able to Use column id? – Jack Sparrow Mar 22 '18 at 14:12
What do you mean by column id? – freedomn-m Mar 22 '18 at 14:18
In that place 17 and 22 can I able to use ID of a columns because I set values from 0 to 23 as id for columns in table but you suggested only works on index alone.I need to use column ID there what about this ? – Jack Sparrow Mar 22 '18 at 14:24

Change background color for certain cells in the appending row to a table using JQuery

3 Answers3

Linked