Filtering by field

Filter from a table based on a field

by Trifan Alexandru

HTML

<div class="errorFilterPartnerOrderId"></div>
<table class="grid" border="1"></table>
<input type="text" id="partnerOrderId" />
<input type="text" id="partialMatch" />

CSS

.errorFilterPartnerOrderId {
    border: 1px solid red;
    padding: 10px;
    display: none;
}

JavaScript

function populate() {

    for (var i = 0; i < 10; i++) {
        var tr = $('<tr></tr>');
        var td = $('<td></td>');
        tr.data('partnerOrderId', '' + i);
        td.text('info ' + i);
        tr.append(td);
        $('.grid').append(tr);
    }
}

function filter() {
    $('.errorFilterPartnerOrderId').css('display', 'none');
    $('.errorFilterPartnerOrderId').text('Could not find partnerOrderIds: ');
    var partnerOrderIds = $('#partnerOrderId').val().split(',');
    console.log(partnerOrderIds);
    var tableEntrys = $('.grid').find('tr');
    var tbody = $('.grid').find('tbody');
    $(tbody).css('display', 'block');
    var tableEntrysToShow = [];
    for (var i = 0; i < tableEntrys.length; i++) {
        $(tableEntrys[i]).css('display', 'block');
        var position = partnerOrderIds.indexOf($(tableEntrys[i]).data('partnerOrderId'));
        if (position != -1) {
            tableEntrysToShow.push(i);
            partnerOrderIds.splice(position, 1);
        }
    }

    if (tableEntrysToShow.length !== 0) {
        tableEntrys.each(function (index, elem) {
            $(elem).css('display', 'none');
        });

        for (i = 0; i < tableEntrysToShow.length; i++) {
            $(tableEntrys[tableEntrysToShow[i]]).css('display', 'block');
        }
    }

    if (partnerOrderIds.length > 0 && partnerOrderIds[0]) {
        $('.errorFilterPartnerOrderId').css('display', 'block');
    }

    for (i = 0; i < partnerOrderIds.length; i++) {
        var text = $('.errorFilterPartnerOrderId').text();
        text += ' `' + partnerOrderIds[i] + '`';
        $('.errorFilterPartnerOrderId').text(text);
    }
}

function partialMatch() {
    var valueToMatch = $('#partialMatch').val();
    console.log(valueToMatch);
    filter();
    $('.grid').children().each(function(index, elem) {
        if($(elem).css('display') != 'none' && $(elem).text().search(valueToMatch) == -1) {
             console.log(elem);
             $(elem).css('display', 'none');   
...