第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

使用 Javascript/ jQuery 動(dòng)態(tài)添加行跨度

使用 Javascript/ jQuery 動(dòng)態(tài)添加行跨度

偶然的你 2023-08-18 16:34:31
我正在嘗試將動(dòng)態(tài)行跨度添加到我的表中，我在編程世界中是全新的，所以我仍在學(xué)習(xí)。這是我的桌子::<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>因此，如果我向表中添加新學(xué)生，我需要調(diào)整行跨度，所以我想知道是否有一種方法可以在添加新學(xué)生時(shí)自動(dòng)添加：我知道我可以調(diào)整rowspan，但我想通過(guò) Javascript/jQuery 來(lái)做到這一點(diǎn)，有人可以嘗試幫助我嗎？
查看完整描述

1 回答

?
慕田峪7331174

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超13個(gè)贊

這有效

  1. 每棟建筑添加一個(gè) tbody

  2. 計(jì)算每棟建筑的行數(shù)

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


查看完整回答
反對(duì) 回復(fù) 2023-08-18
  • 1 回答
  • 0 關(guān)注
  • 140 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)