javascript - 使用 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)

也许您不会像我下面那样使用它，但我确信这会有所帮助，并且您可能会找到一种在代码中使用它的方法。 请看一下代码片段，然后告诉我您是否需要更多帮助。

编辑
如果您只需要一些列出的 ID 来接收背景，也许您可​​以拥有或接收一个数组，然后检查它们是否是您所需要的。这也会改变 foo 循环，因为现在您不需要从 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--> 另外，如果您需要在运行时修改代码，请创建一个更改背景的函数，这样，每次需要更改 背景，调用这个函数，传递你想要的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>