Add dynamically rowspan with Javascript/ jQuery

user_14668106 0
Viewed 68

I am trying to add dynamically rowspan to my table, I am totally new in the programming world so I am still learning. This is my 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>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>

So if I add a new student to the table, I need to adjust rowspan so I was wondering if there is a way to add that automatically when I add a new student:

For example currently, if I add a new student my table is totally messed up:

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

I know that I can adjust rowspan but I want to do this via Javascript/jQuery, can anybody try to help me with this?

html jquery javascript
1 Answers

This works

  1. Add a tbody per building
  2. Calculate the rows in each building

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

user_2957830
Related