CODEWITHSUNDEEP
javascriptjquery
Jack Sparrow
Jack Sparrow

Reputation: 57

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

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.

Upvotes: 2

Views: 247

Answers (1)

Calvin Nunes
Calvin Nunes

Reputation: 6516

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>

Upvotes: 3

Related Questions