使用jquery更改一组列而不是前两列的背景颜色

Question

我需要使用列id更改一组列的背景颜色。前两列背景不需要更改。在Jquery中如何实现？ 这是我迄今为止尝试过的。我已在其中添加了我的完整脚本，您可以获得更多信息。

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

编辑： 我已经添加了我的 HTML 代码

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

完整的脚本：

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

我每次都添加一个名为“row1”的新行，它的单元格背景颜色需要根据"fromtime" 到"ToTime" 值进行修改。使用Children('td') td 意味着整行都着色了。但是我只需要特定的细胞。

Answer 1

您的代码还有许多其他不适用或似乎与问题无关的内容，然后，我在这里制作了一个可以帮助您解决确切问题的代码（将background 应用于列，但不是首先第二个）。

我正在使用一个非常基本的逻辑，循环遍历所有列，从索引 2 开始（因为您不希望前 2 列具有 BG）

也许您不会像我在下面那样使用它，但我相信这会有所帮助，您可能会找到一种在代码中使用它的方法。 请看一下 sn-p，如果您需要更多帮助，请告诉我。

编辑
如果您只需要一些列出的 ID 来接收background，也许您可​​以拥有或接收一个数组，然后检查它们是否是您需要的。这也将改变 foror 循环，因为现在您不需要从 2 开始，您可以循环遍历所有列并将背景应用于数组中列出的列，如下所示：

选项 1
遍历所有列（以确保您只会找到列，而不是任何其他元素），然后检查 ID。

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

选项 2
只需遍历 ID 以直接查找列，然后应用 BG。
--EDIT 2--> 另外，如果你需要在运行时修改代码，创建一个改变背景的函数，这样，每次你需要改变background ，调用这个函数，传递你想要的ID和你想要的颜色……如下：

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