Change background color for a group of columns not first two columns using jquery

Question

I need to change background color for a group of columns using column id.The first two columns background would not need to change.How to achieve in Jquery? This is I have tried so far.I have added my Complete script in this you can get more info about it.

 var fromtime = obj[i].FromTime; // Here fromtime gives id of a column not index
  var totime = obj[i].totime; // Here totime gives id of a column not index
 $(row1).children('td').slice(fromtime,totime).not('td:eq(0)').not('td:eq(0)').css({ "background-color": workcolor });

Edit: I have added my HTML Code

<table class="table table-striped" id="table1">
                <thead>
                    <tr>
                        <th class="" id="profilepic">Image</th>
                        <th id="empName">Employee</th>
                        <th id="00">00:00</th>
                        <th id="01">01:00</th>
                        <th id="02">02:00</th>
                        <th id="03">03:00</th>
                        <th id="04">04:00</th>
                        <th id="05">05:00</th>
                        <th id="06">06:00</th>
                        <th id="07">07:00</th>
                        <th id="08">08:00</th>
                        <th id="09">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>

Complete script:

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

I am appending a new row each time called "row1" that's cells background color needs to modified based on a "fromtime" to "ToTime" values.There is Children('td') td used means the whole row got colored.But I need the certain cells only.

why not simply use `css` and `classes`? jQuery/javascript is not required — Fr0zenFyr, Mar 22 '18 at 12:38
because the columns that need to apply `background` are dynamic, he doesn't know which one will need the `class` — Calvin Nunes, Mar 22 '18 at 12:50

Calvin Nunes · Accepted Answer · 2018-03-22T14:10:48.227

your code have many other things that don't apply or doesn't seem relevant to the question, then, I making here a code that can help you with your exactly question (apply background to columns but not first and second ones).

I'm using a very basic logic, looping through all columns, starting at index 2 (cause you don't want the first 2 columns to have BG)

Maybe you won't use it exactly like I did below, but I'm sure that this can help and you may find a way to use it inside your code. please, take a look at the snippet and tell me if you need more help here.

EDIT
If you need just some listed IDs to receive the background, maybe you can have or receive an array and then check to see if they are what you need. This will also change the foor loop, because now you don't need to start at 2, you can loop through all columns and will apply background just to the ones listed in the array, look below:

OPTION 1
loop through all columns (to ensure that you will find only columns, not any other element), then check the IDs.

$(document).ready(function(){
  var arrayOfIDs = ["02", "03", "04", "07", "10", "15", "21"];

  var myTable = $(".table-striped");
  var myColumns = $(myTable.find("th"));
  
  //loop through all columns
  myColumns.each(function(){
    var column = this;
    
    //loop through all IDs you want to change
    for (var i = 0; i < arrayOfIDs.length; i++){
      if (column.id == arrayOfIDs[i]){
        column.style.background = "rgba(50,50,200,0.85)";
      }
    }
  });     
});

th{
  border: 1px solid black;
}

<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="00">00:00</th>
                        <th id="01">01:00</th>
                        <th id="02">02:00</th>
                        <th id="03">03:00</th>
                        <th id="04">04:00</th>
                        <th id="05">05:00</th>
                        <th id="06">06:00</th>
                        <th id="07">07:00</th>
                        <th id="08">08:00</th>
                        <th id="09">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>

OPTION 2
Just loop through IDs to find the columns directly and then apply the BG.
--EDIT 2--> Also, if you need to modify the code on the run, create a function that changes background, this way, every time you need to change the background, call this function, passing the IDs you want and the color you want... as below:

$(document).ready(function(){

    //function that loop through all IDs you want to change
    var paintBackground = function(arrayOfIds, colorIWant){
      for (var i = 0; i < arrayOfIds.length; i++){
      var myId = arrayOfIds[i];
        var column = $("#"+myId);
        column.css('background', colorIWant);
      }
    }

    var firstArrayToPaint = ["00", "01", "02", "06", "07", "08"];
    paintBackground(firstArrayToPaint, "orange");
    
    //Added a timeout just to better examplify, don't use the timeout if you don't need it
    setTimeout(function(){
      //add new row
      var myTable = $('.table thead'); 
      var row1 = document.createElement("tr");
      myTable[0].append(row1);
      
      //specifying new columns to this row
      var qtdOfNewColumns = 6;
      var secondArrayToPaint = ["17", "18", "19", "20", "21", "22"];
      for (var i = 0; i < qtdOfNewColumns; i++){
        var column = document.createElement("th");
        column.id = secondArrayToPaint[i];
        column.textContent = secondArrayToPaint[i]+":00";
        row1.append(column); //adding the columns to the row
      }        
      paintBackground(secondArrayToPaint, "yellow");
    },1500);
            
  });

th{
      border: 1px solid black;
    }

<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="00">00:00</th>
        <th id="01">01:00</th>
        <th id="02">02:00</th>
        <th id="03">03:00</th>
        <th id="04">04:00</th>
        <th id="05">05:00</th>
        <th id="06">06:00</th>
        <th id="07">07:00</th>
        <th id="08">08:00</th>
        <th id="09">09:00</th>
        <th id="10">10:00</th>        
    </tr>
</thead>
<tbody id="body1">

</tbody>

Your code works fine.But I need to iterate using 'ID' of columns say need to color the background from column which has id 17 to 22 means how should I do it? — Jack Sparrow, Mar 22 '18 at 12:30
how do you will know which IDs you need to iterate with? it will be in an array, eg.: `var idsIterate = ["17", "18", "19"...]` ?? — Calvin Nunes, Mar 22 '18 at 12:34
I am append a row for that already available columns for that say from 17 to 22 means how to change background color for that? — Jack Sparrow, Mar 22 '18 at 13:13
sorry, didn't understand, how do you append a row? Is row an element? — Calvin Nunes, Mar 22 '18 at 13:21
I mean I'am appending a new row to the table 'table-striped' in that row there are certain cells background need to changed. Certain cell in the sense, an array of column ID's.How to do it? — Jack Sparrow, Mar 22 '18 at 13:28
still not understanding, can you please edit/update your initial question adding the rendered/final html, then I can see what is the "row" you are talking about and how can i access it to modify — Calvin Nunes, Mar 22 '18 at 13:38
if you add `th` after the rendered page, then transform my code above in a function `var paintBackground = function(){ //my code here});` then add the needed ids to the array of IDs, and call this function every time you need to paint backgrounds to `th` — Calvin Nunes, Mar 22 '18 at 13:41
I explained my requirement in above Complete script part.Let you know bro.. — Jack Sparrow, Mar 22 '18 at 13:45
I edited the **Option 2** of my answer, see if you get the logic and can use it — Calvin Nunes, Mar 22 '18 at 13:48
I explained my requirement clearly here You can go through this [link]https://stackoverflow.com/questions/49430357/change-background-color-for-certain-cells-in-the-appending-row-to-a-table-using — Jack Sparrow, Mar 22 '18 at 13:53
Well, using my logic you can easily achieve that... after appending the row, just select all `th` of this row with: `$(row1).find('th');` then loop through it to get the ID's you need and call the function to change background... — Calvin Nunes, Mar 22 '18 at 14:00
Ok, there is... this is my final edit (option 2), with all my options, tips, logic and edits, you can be able to do what you need... if not, please, stop and rethink your logic, because maybe it is more confusing to you than you need... — Calvin Nunes, Mar 22 '18 at 14:11

Change background color for a group of columns not first two columns using jquery

1 Answers1