Colspan匹配上方的行，该行根据屏幕尺寸隐藏了td

Question

我有一个表格行，该行将隐藏具有“ HideTdSmallScreen”类的td，并希望使下表的colspan与上面的可行td的数量匹配。有时可见7 td，有时只有5 td。

  <tr>
        <td>Hill Top</td>
        <td class="HideTdSmallScreen">Tues</td>
        <td class="HideTdSmallScreen"> 9.00- 5.00</td>
        <td> 2020</td>
        <td> 1   </td>
        <td> £35 </td>  
        <td>     </td> 
  </tr

<tr>
    <td colspan="7">
        <p>Message</p>                                                                          
     </td>
</tr>

Answer 1

function changeColspan(){
  var screenMax = 599;
  var colspan = 7;
  if ( $( window ).width() < screenMax ){
    var displayedTdS = $('.reference-row td:not(.HideTdSmallScreen)');
    if (displayedTdS){
      colspan = displayedTdS.length;
    }
  } 
  $('.changed-row').attr('colspan', colspan);
}

$( window ).on('resize', changeColspan);

changeColspan();

假设您的第一行具有类reference-row，第二行具有changed-row，则此jQuery代码应该执行此操作。

screenMax变量是隐藏td-s的宽度，而colspan是默认的colspan。