Как сделать поиск по таблице CL46 в Tilda
Добрый день. Ответ с сайта mo-ti.ru
У вопрос по какой-то статье или примеру?
Опишите подробнее, что именно не получается. Спасибо!
У вопрос по какой-то статье или примеру?
Опишите подробнее, что именно не получается. Спасибо!
SIBIRIA
Антифриз оптом
При покупке от 500 л скидка 6% и доставка бесплатно до 30.11.19
Как сделать поиск по таблице CL46 в Tilda
1
Создали таблицу CL46
2
Наполнили её контентом
3
Добавили код на страницу в блок Другое - Т123
В коде прописали ID блока с таблицей
var tableID = '#rec137828220';
Добавили 3 поля для первых 3-х столбцов
<tr class="table-filters">
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
В коде прописали ID блока с таблицей
var tableID = '#rec137828220';
Добавили 3 поля для первых 3-х столбцов
<tr class="table-filters">
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="text"/></td>
</tr>
Библиотека для примера
<script>
$( document ).ready(function() {
var tableID = '#rec166120821';
setTimeout(function(){
$(tableID+' .t431__tbody>tr').addClass('table-data');
$(tableID+' .t431__thead').append('<tr class="table-filters"><td><input type="text" placeholder="EL060611"/></td><td><input type="text" placeholder="740817"/></td><td><input type="text" placeholder="Антифриз"/></td></tr>')
$('.table-filters input').on('input', function () { filterTable($(this).parents('table'));
});
function filterTable($table) {
var $filters = $table.find('.table-filters td');
var $rows = $table.find('.table-data');
$rows.each(function (rowIndex) {var valid = true;
$(this).find('td').each(function (colIndex) {
if ($filters.eq(colIndex).find('input').val()) {
if ($(this).html().toLowerCase().indexOf(
$filters.eq(colIndex).find('input').val().toLowerCase()) == -1) {valid = valid && false;
} } });
if (valid === true) { $(this).css('display', '');
} else {$(this).css('display', 'none');
} });
};
}, 1500);
});
</script>
<style>
.table-filters input {
height: 30px;
width: 80%;
margin-top: 20px;
margin-bottom: 15px;
margin-left: 10px;
border-radius: 3px;
outline: none;
padding-left: 5px;
font-size: 16px;
font-weight: 200;
font-family: 'Open Sans',Arial,sans-serif;
border: 1px solid rgba(149, 129, 193, 0.4);
}
tbody.t431__tbody>tr:hover {
background: #f9ecff !important;
}
</style>
