亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

使用 Javascript/ jQuery 動態添加行跨度

使用 Javascript/ jQuery 動態添加行跨度

偶然的你 2023-08-18 16:34:31
我正在嘗試將動態行跨度添加到我的表中，我在編程世界中是全新的，所以我仍在學習。這是我的桌子::<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 來做到這一點，有人可以嘗試幫助我嗎？
查看完整描述

1 回答

?
慕田峪7331174

TA貢獻1828條經驗 獲得超13個贊

這有效

  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>


查看完整回答
反對 回復 2023-08-18
  • 1 回答
  • 0 關注
  • 134 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號