Как сделать поиск по таблице CL46 в Tilda
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>
Библиотека для примера
<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);
}
</style>

<script>
$( document ).ready(function() {
var tableID = '#rec137828220';    
$(tableID+' .t431__tbody>tr').addClass('table-data');
$(tableID+' .t431__thead').append('<tr class="table-filters"><td><input type="text"/></td><td><input type="text"/></td><td><input type="text"/></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');
        }     });
};
});
</script>
Made on
Tilda