在JQuery选择器中添加变量时出现问题

Question

我正在开发一个表，我需要在该表的某些单元格中添加文本。 单元格的列在选择器中设置了一个变量，以了解在何处添加文本。

这是代码：

<table class="table table-bordered table-responsive-sm" id="agenda">
 <thead>
  <tr>
   <th><p style="display: none;">0</p></th>
   <th>Mon</th>
   <th>Tue</th>
   <th>Wed</th>
   <th>Thu</th>
   <th>Fri</th>
   <th>Sat</th>
   <th>Sun</th>
  </tr>
 </thead>
 <tbody id="agenda-body">
  <tr>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
   <td></td>
  </tr>
 //more code
 </tbody>
</table>

var day = 1;
var number_columns = 3;
for (let i = number_columns + 1 ; i < 10; i++){
 $('#agenda-body > tr:nth-child(1) > td:nth-child("' + day + '")').html(day);
 day = day + 1;
 console.log(day);
}

我遇到下一个错误：

有什么建议吗？ 感谢您的阅读！

Answer 1

删除nth-child("...")中的双引号。检查以下代码。解决方法是td:nth-child(' + day + ')

var day = 1;
var number_columns = 3;
for (let i = number_columns + 1; i < 10; i++) {
  console.log('#agenda-body > tr:nth-child(1) > td:nth-child(' + day + ')');
  $('#agenda-body > tr:nth-child(1) > td:nth-child(' + day + ')').html(day);
  day = day + 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-bordered table-responsive-sm" id="agenda">
  <thead>
    <tr>
      <th>
        <p style="display: none;">0</p>
      </th>
      <th>Mon</th>
      <th>Tue</th>
      <th>Wed</th>
      <th>Thu</th>
      <th>Fri</th>
      <th>Sat</th>
      <th>Sun</th>
    </tr>
  </thead>
  <tbody id="agenda-body">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    //more code
  </tbody>
</table>