时间戳

首页 > 解决方案 > 使用 Javascript/jQuery 动态添加行跨度

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

问题描述

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

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

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

例如，目前，如果我添加一个新学生，我的表就会完全混乱：

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

我知道我可以调整rowspan，但我想通过 Javascript/jQuery 来做到这一点，有人可以帮我解决这个问题吗？

标签： javascripthtmljquery

解决方案

这有效

  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>

推荐阅读