如何使用nth-child/type-of根据用户输入改变背景颜色？

Question

我正在尝试根据用户输入更改表格单元格的背景。

如果用户输入3小时，时间是10，那么我需要改变表格单元格7-8，8-9，9-10的背景来显示这个范围。

下面是HTML：

<thead>
  <tr>
   <th id="car">Car</th>
   <th id="7">7 - 8</th>
   <th id="8">8 - 9</th>
   <th id="9">9 - 10</th>
   <th id="10">10 - 11</th>
   <th id="11">11- 12</th>
   <th id="12">12 -13</th>
   <th id="13">13 - 14</th>
   <th id="14">14 - 15</th>
   <th id="15">15 - 16</th>
   <th id="16">16 - 17</th>
   <th id="exit_miles">Exit Miles</th>                            
  </tr>
</thead>
<tr id="car-1-test">
   <td id="car-1">Car 1</td>
   <td id="car-1-7" class="charging not_charging">Test</td>
   <td id="car-1-8" class="charging not_charging">Test</td>
   <td id="car-1-9" class="charging not_charging">Test</td>
   <td id="car-1-10" class="charging not_charging">Test</td>
   <td id="car-1-11" class="charging not_charging">Test</td>
   <td id="car-1-12" class="charging not_charging">Test</td>
   <td id="car-1-13" class="charging not_charging">Test</td>
   <td id="car-1-14" class="charging not_charging">Test</td>
   <td id="car-1-15" class="charging not_charging">Test</td>
   <td id="car-1-16" class="charging not_charging">Test</td>
   <td id="car-1-exit-miles">60</td>
</tr> 

到目前为止我所拥有的..。

// Check how many hours are needed for charge 

function checkHours(){
  var lhours = $("#car-1-charge-needed").text();
  var ltime = $("#car-1-lt")
    $("#car-1-test > td:nth-child("+ ltime - lhours.val +")").css("background-colour", "blue");
}

// Generate time table 

$('#generate-time-table').click(function() {
 checkHours();
})

下面是完整的代码：https://jsfiddle.net/Coxy/bv5jct7n/6/

小提琴已更新。

为了清楚起见，用户输入的结果表明需要设置多少小时以及他们离开的时间。我需要在表格中显示这些时间是在离开时间之前被标出的。

编辑**已更新JS，以显示正确的变量。谢谢安德烈亚斯。

实际上，我认为这可能是错误的方法。我在想，如果我可以根据用户的输入(充电所需的小时数和剩余时间)将课程从不充电切换到充电，而不是尝试第n个孩子的方法，可能会更好。我仍然不确定我如何才能做到这一点，否则我将如何做到这一点。任何建议都是受欢迎的。

$(".generate").click(function() {
  var lvalue = Number(document.getElementById('time-input').value);
  var hoursneeded = document.getElementById('car-1-charge-needed').textContent;
  var timeTd = $('table_id_2 td[id$="-' + lvalue + '"]'),
      previousTds = timeTd.prevAll().slice(0, -1),
      numberOfHours = hoursneeded;
  $("table_id_2 td").removeClass("blocked");
  previousTds.slice(0, numberOfHours)
             .addClass("blocked");
             console.log(hoursneeded);
});

代码更新现在我认为没有错误，但我仍然没有得到想要的结果。

Answer 1

为此，您可以混合使用ends with ($=) selector、.prevAll()和.slice()

首先找到id以给定时间结尾的<td>：

var timeTd = $('table td[id$="-' + time + '"]')

然后获取之前的所有<td>元素(.prevAll())，并使用.slice()删除第一个单元格(汽车的名称

var previousTds = timeTd.prevAll().slice(0, -1); /* the tds are in reverse order, hence the (0, -1) range */

现在，我们必须选择要用另一个.slice()调用“阻塞”的元素的数量

var tdsToBlock = previousTds.slice(0, numberOfHours);

工作示例：

​

$("select").on("change", function() {
  var timeTd = $('table td[id$="-' + this.value + '"]'),
      previousTds = timeTd.prevAll().slice(0, -1),
      numberOfHours = 2;

  $("table td").removeClass("blocked");

  previousTds.slice(0, numberOfHours)
             .addClass("blocked");
})

.blocked {
  background-color: yellow
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
  <option></option>
  <option value="8">8</option>
  <option value="9">9</option>
  <option value="10">10</option>
</select>

<table>
  <thead>
    <tr>
      <th id="car">Car</th>
      <th id="7">7 - 8</th>
      <th id="8">8 - 9</th>
      <th id="9">9 - 10</th>
      <th id="10">10 - 11</th>
      <th id="exit_miles">Exit Miles</th>
    </tr>
  </thead>
  <tbody>
    <tr id="car-1-test">
      <td id="car-1">Car 1</td>
      <td id="car-1-7" class="charging not_charging">Test</td>
      <td id="car-1-8" class="charging not_charging">Test</td>
      <td id="car-1-9" class="charging not_charging">Test</td>
      <td id="car-1-10" class="charging not_charging">Test</td>
      <td id="car-1-exit-miles">60</td>
    </tr>
  </tbody>
</table>

​