使用 Javascript/ jQuery 动态添加行跨度

Question

我正在尝试将动态行跨度添加到我的表中，我在编程世界中是全新的，所以我仍在学习。这是我的桌子::

<table  border="1">

   <thead>

      <tr>

      

         <th class="text-center">Building</th>

         <th class="text-center">Student ID</th>

         <th class="text-center">Student Name</th>

         <th class="text-center">Payable</th>

         <th class="text-center">Paid Amount</th>

         <th class="text-center">Due</th>

         <th class="text-center">Active</th>

      </tr>

   </thead>

   <tbody>

      <tr>

         <td class="build-name" rowspan="3"><b>School 1</b></td>

         <td align="center">151-15-4366</td>

         <td align="center">Lorem Name</td>

         <td align="center">13000</td>

         <td align="center">10500</td>

         <td align="center">2500</td>

         <td align="center">True</td>

      </tr>

      <tr>

         <td align="center">151-15-4852</td>

         <td align="center">Lorem Name</td>

         <td align="center">13000</td>

         <td align="center">3000</td>

         <td align="center">10000</td>

         <td align="center">True</td>

      </tr>

      <tr>

         <td align="center">151-15-5355</td>

         <td align="center">Lorem Name</td>

         <td align="center">18000</td>

         <td align="center">3000</td>

         <td align="center">15000</td>

         <td align="center">True</td>

      </tr>

      <tr>

         <td class="build-name" rowspan="2"><b>School 2</b></td>

         <td align="center">151-15-4841</td>

         <td align="center">Lorem Name</td>

      </tr>

      

   </tbody>

</table>

因此，如果我向表中添加新学生，我需要调整行跨度，所以我想知道是否有一种方法可以在添加新学生时自动添加：

我知道我可以调整rowspan，但我想通过 Javascript/jQuery 来做到这一点，有人可以尝试帮助我吗？

Answer 1

这有效每栋建筑添加一个 tbody计算每栋建筑的行数普通JSdocument.querySelectorAll("table&nbsp;tbody") &nbsp;&nbsp;.forEach(tb&nbsp;=>&nbsp;tb.querySelector(".build-name") &nbsp;&nbsp;&nbsp;&nbsp;.setAttribute("rowspan",tb.querySelectorAll("tr").length))document.querySelectorAll("table tbody")&nbsp; .forEach(tb => tb.querySelector(".build-name")&nbsp; &nbsp; .setAttribute("rowspan",tb.querySelectorAll("tr").length))<table&nbsp; border="1">&nbsp; &nbsp;<thead>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th class="text-center">Building</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th class="text-center">Student ID</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th class="text-center">Student Name</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th class="text-center">Payable</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th class="text-center">Paid Amount</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th class="text-center">Due</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<th class="text-center">Active</th>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp;</thead>&nbsp; &nbsp;<tbody>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td class="build-name" rowspan="3"><b>Shool 1</b></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">151-15-4366</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">Lorem Name</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">13000</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">10500</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">2500</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">True</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">151-15-4852</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">Lorem Name</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">13000</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">3000</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">10000</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">True</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">151-15-5355</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">Lorem Name</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">18000</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">3000</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">15000</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">True</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">151-15-5355</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">Lorem Name</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">18000</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">3000</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">15000</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">True</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td class="build-name" rowspan="2"><b>School 2</b></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">151-15-4841</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">Lorem Name</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">13000</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">10500</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">2500</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">True</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">151-15-4930</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">Lorem Name</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">18000</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">33000</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">-15000</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<td align="center">True</td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;</tbody></table>jQuery$("table&nbsp;tbody").each(function()&nbsp;{ &nbsp;&nbsp;$(this).find(".build-name").attr("rowspan",&nbsp;$(this).find("tr").length) })$("table tbody").each(function() {&nbsp; $(this).find(".build-name").attr("rowspan", $(this).find("tr").length)})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table border="1">&nbsp; <thead>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th class="text-center">Building</th>&nbsp; &nbsp; &nbsp; <th class="text-center">Student ID</th>&nbsp; &nbsp; &nbsp; <th class="text-center">Student Name</th>&nbsp; &nbsp; &nbsp; <th class="text-center">Payable</th>&nbsp; &nbsp; &nbsp; <th class="text-center">Paid Amount</th>&nbsp; &nbsp; &nbsp; <th class="text-center">Due</th>&nbsp; &nbsp; &nbsp; <th class="text-center">Active</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td class="build-name" rowspan="3"><b>Shool 1</b></td>&nbsp; &nbsp; &nbsp; <td align="center">151-15-4366</td>&nbsp; &nbsp; &nbsp; <td align="center">Lorem Name</td>&nbsp; &nbsp; &nbsp; <td align="center">13000</td>&nbsp; &nbsp; &nbsp; <td align="center">10500</td>&nbsp; &nbsp; &nbsp; <td align="center">2500</td>&nbsp; &nbsp; &nbsp; <td align="center">True</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td align="center">151-15-4852</td>&nbsp; &nbsp; &nbsp; <td align="center">Lorem Name</td>&nbsp; &nbsp; &nbsp; <td align="center">13000</td>&nbsp; &nbsp; &nbsp; <td align="center">3000</td>&nbsp; &nbsp; &nbsp; <td align="center">10000</td>&nbsp; &nbsp; &nbsp; <td align="center">True</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td align="center">151-15-5355</td>&nbsp; &nbsp; &nbsp; <td align="center">Lorem Name</td>&nbsp; &nbsp; &nbsp; <td align="center">18000</td>&nbsp; &nbsp; &nbsp; <td align="center">3000</td>&nbsp; &nbsp; &nbsp; <td align="center">15000</td>&nbsp; &nbsp; &nbsp; <td align="center">True</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td align="center">151-15-5355</td>&nbsp; &nbsp; &nbsp; <td align="center">Lorem Name</td>&nbsp; &nbsp; &nbsp; <td align="center">18000</td>&nbsp; &nbsp; &nbsp; <td align="center">3000</td>&nbsp; &nbsp; &nbsp; <td align="center">15000</td>&nbsp; &nbsp; &nbsp; <td align="center">True</td>&nbsp; &nbsp; </tr>&nbsp; </tbody>&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td class="build-name" rowspan="2"><b>School 2</b></td>&nbsp; &nbsp; &nbsp; <td align="center">151-15-4841</td>&nbsp; &nbsp; &nbsp; <td align="center">Lorem Name</td>&nbsp; &nbsp; &nbsp; <td align="center">13000</td>&nbsp; &nbsp; &nbsp; <td align="center">10500</td>&nbsp; &nbsp; &nbsp; <td align="center">2500</td>&nbsp; &nbsp; &nbsp; <td align="center">True</td>&nbsp; &nbsp; </tr>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td align="center">151-15-4930</td>&nbsp; &nbsp; &nbsp; <td align="center">Lorem Name</td>&nbsp; &nbsp; &nbsp; <td align="center">18000</td>&nbsp; &nbsp; &nbsp; <td align="center">33000</td>&nbsp; &nbsp; &nbsp; <td align="center">-15000</td>&nbsp; &nbsp; &nbsp; <td align="center">True</td>&nbsp; &nbsp; </tr>&nbsp; </tbody></table>