Jquery 如何使用第n个子项/类型根据用户输入更改背景颜色？

我试图根据用户输入更改表格单元格的背景

如果用户输入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> 

下面是对完整代码的修改：

小提琴更新

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

编辑**更新的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);
});

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

您可以混合使用，和

首先查找id以给定时间结尾的：

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

然后抓取前面的所有元素.prevAll并删除第一个单元格，即带有.slice的汽车名称

现在，我们必须选择要用另一个.slice调用阻止的元素数

工作示例：

$select.onchange，函数{ var timeTd=$'表td[id$=-'+this.value+']'， previousTds=timeTd.prevAll.slice0，-1， 小时数=2； $table td.removeClassblocked； 以前的TDS.0，numberOfHours .addClassblocked； } .封锁{ 背景颜色：黄色 } 8. 9 10 汽车 7 - 8 8 - 9 9 - 10 10 - 11 出口里程 汽车1 测验 测验 测验 测验 60

---

它的意思是从用户输入的lhour中获取值，并将其分配给具有该数值的td小区。即用户输入=8，它从单元格编号8开始，然后返回用户输入所需的小时数。我可以看出这是一个不正确的复制品。谢谢你，我会编辑它。非常感谢你花时间向我解释。你说的话很有道理。我现在将尝试将您所说的实现到我的代码中。我会让你知道事情的进展。再次感谢。很抱歉，我已经实现了代码，但是当我单击“生成”按钮时，它不起作用。对不起，我肯定理解了一些东西。我用你的代码片段用最新的代码编辑了这个问题。它不起作用是有史以来最无用的错误描述；在你的问题中没有一个问题可以解决。尝试在JSFIDLE上修改完整的示例对我来说是不合适的。还是一堆废话。好的，当点击“生成时间表”按钮时，它似乎什么都不做。我将$select.onchange，函数{更改为$'generate-time-table'。单击函数{希望复制代码段的功能。当我检查控制台时，它没有显示任何错误。我还添加了变量值左值。我将尝试了解更多信息以更好地解释。

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

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

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