Есть таблица 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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Какие существуют виды рекламных бордов и как выбрать подходящий?
Всех приветствую,сразу извиняюсь если название заголовка не совпадает c моим вопросом
У меня есть div с contenteditableНапример, в нем есть 4 теги p с текстом
У меня есть скрипт, который при клике на кнопку добавляет на страницу ul c liКогда фокус находится на li и пользователь нажимает Enter - я создаю...
Изучаю вопрос связанный с IOC (Инверсия управления), как я понял это некий абстрактный паттерн, который говорит,что нужно делать слабое связывание...