Скрол тела таблицы, но с фиксированным заголовком

243
02 апреля 2019, 02:10

Есть таблица https://jsfiddle.net/ozrhgw04/4/. Как сделать Скрол тела таблицы, но с фиксированным заголовком

var $table = $('table.tftable'); 
$table.on('change', '.chk-all', function() { 
  var 
    index = $(this).closest('th').index(), 
    selector = `td:nth-child(${index + 1}) input[type="checkbox"]`, 
    checked = this.checked; 
 
  $table.find(`tr ${selector}`).prop('checked', checked); 
  $table.find('tr').slice(1).filter(function() { 
    return !$(this) 
      .find('.green') 
      .closest('td') 
      .toArray() 
      .map(n => $(n).index()) 
      .filter(n => n !== index) 
      .filter(n => $table.find(`tr:first th:nth-child(${n + 1}) input:checked`).length).length; 
  }).detach().sort(function(a, b) { 
    var 
      aGreen = $(a).find(selector).hasClass('green'), 
      bGreen = $(b).find(selector).hasClass('green'); 
 
    return (bGreen ^ aGreen) ? [1, -1][+(checked ^ bGreen)] : 0; 
  }).appendTo($table); 
});
.green { 
  width: 25px; 
  height: 25px; 
}
<table class="tftable" border="1"> 
    <tbody><tr> 
		<th>#</th> 
		<th> 
<div class="subject-tile" style="width: auto;"> 
<div class="subject-tile-img-wrapper rounded" style="padding-bottom: 15px;padding-top: 7px;"> 
<a href="http://pokupatel.pro/dom/bytovaya-tehnika/belaya-tehnika/"><img class="img-fluid" src="/templates/pokupatel/images/icons/Белая техника.png" data-toggle="tooltip" data-placement="top" title="" alt="Белая техника" style="width: 70px; height: 50px;" data-original-title="Белая техника"></a> 
</div> 
</div> 
    <br> <input type="checkbox" name="category71" class="chk-all"> 
</th><th> 
<div class="subject-tile" style="width: auto;"> 
<div class="subject-tile-img-wrapper rounded" style="padding-bottom: 15px;padding-top: 7px;"> 
<a href="http://pokupatel.pro/dom/bytovaya-tehnika/vstroennaya-tehnika/"><img class="img-fluid" src="/templates/pokupatel/images/icons/Встроенная техника.png" data-toggle="tooltip" data-placement="top" title="" alt="Встроенная техника" style="width: 70px; height: 50px;" data-original-title="Встроенная техника"></a> 
</div> 
</div> 
    <br> <input type="checkbox" name="category72" class="chk-all"> 
</th><th> 
<div class="subject-tile" style="width: auto;"> 
<div class="subject-tile-img-wrapper rounded" style="padding-bottom: 15px;padding-top: 7px;"> 
<a href="http://pokupatel.pro/dom/bytovaya-tehnika/klimaticheskaya-tehnika/"><img class="img-fluid" src="/templates/pokupatel/images/icons/Климатическая техника.png" data-toggle="tooltip" data-placement="top" title="" alt="Климатическая техника" style="width: 70px; height: 50px;" data-original-title="Климатическая техника"></a> 
</div> 
</div> 
    <br> <input type="checkbox" name="category73" class="chk-all"> 
</th><th> 
<div class="subject-tile" style="width: auto;"> 
<div class="subject-tile-img-wrapper rounded" style="padding-bottom: 15px;padding-top: 7px;"> 
<a href="http://pokupatel.pro/dom/bytovaya-tehnika/melkaya-domashnyaya-tehnika/"><img class="img-fluid" src="/templates/pokupatel/images/icons/Мелкая домашняя техника.png" data-toggle="tooltip" data-placement="top" title="" alt="Мелкая домашняя техника" style="width: 70px; height: 50px;" data-original-title="Мелкая домашняя техника"></a> 
</div> 
</div> 
    <br> <input type="checkbox" name="category74" class="chk-all"> 
</th><th> 
<div class="subject-tile" style="width: auto;"> 
<div class="subject-tile-img-wrapper rounded" style="padding-bottom: 15px;padding-top: 7px;"> 
<a href="http://pokupatel.pro/dom/bytovaya-tehnika/melkaya-kuhonnaya-tehnika/"><img class="img-fluid" src="/templates/pokupatel/images/icons/Мелкая кухонная техника.png" data-toggle="tooltip" data-placement="top" title="" alt="Мелкая кухонная техника" style="width: 70px; height: 50px;" data-original-title="Мелкая кухонная техника"></a> 
</div> 
</div> 
    <br> <input type="checkbox" name="category75" class="chk-all"> 
</th><th> 
<div class="subject-tile" style="width: auto;"> 
<div class="subject-tile-img-wrapper rounded" style="padding-bottom: 15px;padding-top: 7px;"> 
<a href="http://pokupatel.pro/dom/bytovaya-tehnika/tehnika-dlya-krasoty/"><img class="img-fluid" src="/templates/pokupatel/images/icons/Техника для красоты.png" data-toggle="tooltip" data-placement="top" title="" alt="Техника для красоты" style="width: 70px; height: 50px;" data-original-title="Техника для красоты"></a> 
</div> 
</div> 
    <br> <input type="checkbox" name="category76" class="chk-all"> 
</th> 
    </tr> 
      <tr>   
          <td> 
           <img src="/uploads/posts/2018-07/1531344803_tenex_logo.png" alt="{name}" style="width: 215px; height: 70px;"><br> 
              <span class="title">Техснабэкспорт</span> <br>  
              <span class="adress">Весенняя 56</span> <br> 
              <span class="phone">+79526036525</span> <br> 
              <span class="site">pok.ru</span> <br> 
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
            
            <input class="green" type="checkbox" name="category"> 
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
</tr>      <tr>   
          <td> 
           <img src="/uploads/posts/2018-07/1531344702_hunter_logo.png" alt="{name}" style="width: 215px; height: 70px;"><br> 
              <span class="title">Hunter Industries</span> <br>  
              <span class="adress">Весенняя 55</span> <br> 
              <span class="phone">+79526036525</span> <br> 
              <span class="site">pok.ru</span> <br> 
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
            
            <input class="green" type="checkbox" name="category"> 
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
</tr>      <tr>   
          <td> 
           <img src="/uploads/posts/2018-07/1531344695_logo-vedtranzit-b.png" alt="{name}" style="width: 215px; height: 70px;"><br> 
              <span class="title">ВЭД ТРАНЗИТ</span> <br>  
              <span class="adress">Весенняя 54</span> <br> 
              <span class="phone">+79526036525</span> <br> 
              <span class="site">pok.ru</span> <br> 
        </td> 
       <td> 
            
            <input class="green" type="checkbox" name="category"> 
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
</tr>      <tr>   
          <td> 
           <img src="" alt="{name}" style="width: 215px; height: 70px;"><br> 
              <span class="title">Компания #2</span> <br>  
              <span class="adress"></span> <br> 
              <span class="phone"></span> <br> 
              <span class="site"></span> <br> 
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
            
            <input class="green" type="checkbox" name="category"> 
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
</tr>      <tr>   
          <td> 
           <img src="/uploads/posts/2018-07/1530961289_mvideo_1996.png" alt="{name}" style="width: 215px; height: 70px;"><br> 
              <span class="title">Компания #1</span> <br>  
              <span class="adress">Весенняя 54</span> <br> 
              <span class="phone">+79526036525</span> <br> 
              <span class="site">http://pokupatel.pro</span> <br> 
        </td> 
       <td> 
            
            <input class="green" type="checkbox" name="category"> 
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
       <td> 
           <input class="black" type="checkbox" name="category"> 
             
        </td> 
</tr> 
 
</tbody></table>

READ ALSO
Один блок под несколько задач

Один блок под несколько задач

Всех приветствую,сразу извиняюсь если название заголовка не совпадает c моим вопросом

208
Как получить все теги при выделении текста в contenteditable

Как получить все теги при выделении текста в contenteditable

У меня есть div с contenteditableНапример, в нем есть 4 теги p с текстом

151
Элемент не получает фокус

Элемент не получает фокус

У меня есть скрипт, который при клике на кнопку добавляет на страницу ul c liКогда фокус находится на li и пользователь нажимает Enter - я создаю...

143
Как правильно сделать Dependency Injection. Теоретический вопрос

Как правильно сделать Dependency Injection. Теоретический вопрос

Изучаю вопрос связанный с IOC (Инверсия управления), как я понял это некий абстрактный паттерн, который говорит,что нужно делать слабое связывание...

165