如何使用 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/

小提琴已更新。

为了澄清，用户输入的结果表明需要设置多少小时以及他们离开的时间。我需要在表格中显示这些时间在休假时间之前被排除在外。

EDIT** 更新了 JS 以显示正确的变量。谢谢安德烈亚斯。

我实际上认为这可能是错误的方法。我在想，如果我可以根据用户输入（充电所需的时间和离开的时间）将课程从不充电切换到充电，而不是尝试第 n 个孩子的方法，这可能会更好。我仍然不确定如何实现这一点，或者它是第 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>