在下一个 TR 上将班级添加到同一个 TD

Question

我想实现这一目标。

如果td有课程并且today ，我想在下一个tr将相同的课程添加到相同的td ，在这个例子中是第 12 天。

<table>
<tbody>
<tr>
    <td data-action="selectDay" data-day="02/02/2020" class="day weekend">2</td>
    <td data-action="selectDay" data-day="02/03/2020" class="day">3</td>
    <td data-action="selectDay" data-day="02/04/2020" class="day">4</td>
    <td data-action="selectDay" data-day="02/05/2020" class="day active today">5</td>
    <td data-action="selectDay" data-day="02/06/2020" class="day">6</td>
    <td data-action="selectDay" data-day="02/07/2020" class="day">7</td>
    <td data-action="selectDay" data-day="02/08/2020" class="day weekend">8</td>
</tr>
<tr>
    <td data-action="selectDay" data-day="02/02/2020" class="day weekend">9</td>
    <td data-action="selectDay" data-day="02/03/2020" class="day">10</td>
    <td data-action="selectDay" data-day="02/04/2020" class="day">11</td>
    <td data-action="selectDay" data-day="02/05/2020" class="day">12</td>
    <td data-action="selectDay" data-day="02/06/2020" class="day">13</td>
    <td data-action="selectDay" data-day="02/07/2020" class="day">14</td>
    <td data-action="selectDay" data-day="02/08/2020" class="day weekend">15</td>
</tr>
</tbody>
</table>

Answer 1

你可以：

• 找到.today元素
• 在其父项中查找其索引
• 找到其他 tr 元素（第一个之后的所有元素？）
• 使用索引来获取那个孩子td
• 应用任何你想要的课程

 var todayElem = document.querySelector(".today"); var todayIndex = [...todayElem.parentNode.children].indexOf(todayElem) console.log(todayIndex) var trElems = document.querySelectorAll("tr"); [...trElems].slice(1).forEach(tr => { tr.querySelectorAll("td")[todayIndex].classList.add("active") });

 .today{ background-color:red } .active{ color: blue }

 <table> <tbody> <tr> <td data-action="selectDay" data-day="02/02/2020" class="day weekend">2</td> <td data-action="selectDay" data-day="02/03/2020" class="day">3</td> <td data-action="selectDay" data-day="02/04/2020" class="day">4</td> <td data-action="selectDay" data-day="02/05/2020" class="day active today">5</td> <td data-action="selectDay" data-day="02/06/2020" class="day">6</td> <td data-action="selectDay" data-day="02/07/2020" class="day">7</td> <td data-action="selectDay" data-day="02/08/2020" class="day weekend">8</td> </tr> <tr> <td data-action="selectDay" data-day="02/02/2020" class="day weekend">9</td> <td data-action="selectDay" data-day="02/03/2020" class="day">10</td> <td data-action="selectDay" data-day="02/04/2020" class="day">11</td> <td data-action="selectDay" data-day="02/05/2020" class="day">12</td> <td data-action="selectDay" data-day="02/06/2020" class="day">13</td> <td data-action="selectDay" data-day="02/07/2020" class="day">14</td> <td data-action="selectDay" data-day="02/08/2020" class="day weekend">15</td> </tr> </tbody> </table>

Answer 2

// find index of today element
var index = null;
document.querySelectorAll('.today').forEach(function(td) {
   index = 0;
   while ((td = td.previousSibling) != null) {
      if (td.tagName != "TD") continue;
      index += 1;
   }
});

// add the class for each row
document.querySelectorAll('tr').forEach(function(tr) {
   tr.querySelectorAll('td').forEach(function(td, i) {
      if (i != index) return;
      td.classList.add("today");
   });
});

我认为您应该在这里查看colgroup功能： https : //developer.mozilla.org/en-US/docs/Web/HTML/Element/colgroup - 通常这是获得目标的更简单方法.

Answer 3

 //select first row var firstTr = $("table tr").first(); // find index of colum var pos = firstTr.find(".day.today").index(); //select next row and apply class today on specific td firstTr.next().find("td:eq("+pos+")").addClass("today");

 .today{ background-color:yellow; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody> <tr> <td data-action="selectDay" data-day="02/02/2020" class="day weekend">2</td> <td data-action="selectDay" data-day="02/03/2020" class="day">3</td> <td data-action="selectDay" data-day="02/04/2020" class="day">4</td> <td data-action="selectDay" data-day="02/05/2020" class="day active today">5</td> <td data-action="selectDay" data-day="02/06/2020" class="day">6</td> <td data-action="selectDay" data-day="02/07/2020" class="day">7</td> <td data-action="selectDay" data-day="02/08/2020" class="day weekend">8</td> </tr> <tr> <td data-action="selectDay" data-day="02/02/2020" class="day weekend">9</td> <td data-action="selectDay" data-day="02/03/2020" class="day">10</td> <td data-action="selectDay" data-day="02/04/2020" class="day">11</td> <td data-action="selectDay" data-day="02/05/2020" class="day">12</td> <td data-action="selectDay" data-day="02/06/2020" class="day">13</td> <td data-action="selectDay" data-day="02/07/2020" class="day">14</td> <td data-action="selectDay" data-day="02/08/2020" class="day weekend">15</td> </tr> </tbody> </table>