使用 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

这有效

1. 每栋建筑添加一个 tbody

2. 计算每栋建筑的行数

普通JS

document.querySelectorAll("table tbody")
  .forEach(tb => tb.querySelector(".build-name")
    .setAttribute("rowspan",tb.querySelectorAll("tr").length))

document.querySelectorAll("table tbody")

  .forEach(tb => tb.querySelector(".build-name")

    .setAttribute("rowspan",tb.querySelectorAll("tr").length))

<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>Shool 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 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>

      </tbody>

      <tbody>

      <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>

         <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-4930</td>

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

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

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

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

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

      </tr>

      

   </tbody>

</table>

jQuery

$("table tbody").each(function() {
  $(this).find(".build-name").attr("rowspan", $(this).find("tr").length)
})

$("table tbody").each(function() {

  $(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">

  <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>Shool 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 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>

  </tbody>

  <tbody>

    <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>

      <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-4930</td>

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

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

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

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

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

    </tr>

  </tbody>

</table>