Сделать Javascript-функцию поиска быстрой

Question

Я сделал небольшую функцию поиска с javascript для поиска строки в таблице: Существуют "tr", которые просто содержат число в качестве идентификатора, и есть "tr", которые содержат "childNode + idOfParentNode" в качестве идентификатора (например ,:

<tr id="1"> ... </tr>
<tr id="childNode1"> ... </tr>

Теперь я хочу просмотреть таблицу, посмотреть, соответствует ли заданная строка или ее часть содержимому родительского элемента "tr". Если это не так, я хочу, чтобы родительский элемент "tr" и его childNode- "tr" были скрыты (или свернуты). И я хочу, чтобы они отображались, если строка или ее часть совпадают. Вот моя функция:

// inputFieldId := Id of the inputField that contains the search-String
// tableId := Id of the table to be searched
function searchTable( inputFieldId, tableId ){
    var inputField = document.getElementById( inputFieldId );
    var input = inputField.value.toUpperCase();
    var countRows   = jQuery( '#' + tableId + ' tr' ).length;
    jQuery('#loader').css( "visibility", "visible" );
    var hideChildren = false;
    var childId = -1;
    var parentId = -1;

    for( var i = 1; i <= countRows; i++ ){
        var trsId = jQuery('#' + tableId + ' tr:nth-child('+i+')' ).attr('id');
        // I am only looking for <tr> that are not "childnodes"
        if( trsId.indexOf( "childNode") == -1 ){
            var firstTd = jQuery('#' + tableId + ' tr:nth-child('+i+') td:nth-child(1)' );
            var firstTdValue = firstTd.text();
            if( firstTdValue.indexOf( input ) == -1 ){
                hideChildren = true;
                childId = trsId;
                parentId = i;
                jQuery('#' + tableId + ' tr:nth-child('+i+')' ).children('td').css("visibility", "collapse");
                jQuery('#' + tableId + ' tr:nth-child('+i+')' ).css("visibility", "collapse");
            }
            else{
                hideChildren = false;
                childId = trsId;
                parentId = i;
                jQuery('#' + tableId + ' tr:nth-child('+i+')' ).children('td').css("visibility", "visible");
                jQuery('#' + tableId + ' tr:nth-child('+i+')' ).css("visibility", "visible");
            }
        }
        else{
            childNodeId = "childNode"+childId;
            if( hideChildren && trsId == childNodeId && parentId > -1 ){
                jQuery('#' + tableId + ' tr:nth-child('+i+')' ).children('td').css("visibility", "collapse");
                jQuery('#' + tableId + ' tr:nth-child('+i+')' ).css("visibility", "collapse");
            }
            else{
                jQuery('#' + tableId + ' tr:nth-child('+i+')' ).children('td').css("visibility", "visible");
                jQuery('#' + tableId + ' tr:nth-child('+i+')' ).css("visibility", "visible");
            }
        }
    }
    jQuery('#loader').css( "visibility", "hidden" );
}

Серьезно, это прекрасно работает, но это НАВСЕГДА !!! особенно если это большой стол, поэтому мне было интересно, если кто-то нашел способ сделать мою функцию быстрее и эффективнее.

Спасибо заранее:)

=============================================== ==========================

РЕДАКТИРОВАТЬ: я сделал это работает ... теперь это выглядит так и работает чудесно:)

function searchTable( inputFieldId, tableId ){
    jQuery('#loader').show();
    var input = jQuery('#'+inputFieldId).val().toUpperCase();
    var parentId = -1

    jQuery('#' + tableId + ' tr').each( function(i) {
        var thiss = jQuery(this);
        var showP = false;
        var showC = false;
        if (thiss.attr('id').indexOf('child') < 0) { // parent
            parentId = thiss.attr('id');
            showP = !(thiss.find('td:first').text().indexOf( input ) < 0);
            thiss.toggle( showP );
        }
        else{ // childNode
            var childId = "childNode"+parentId;
            var parent = jQuery('#'+tableId+' tr#'+parentId+':visible').length;
            showC = !(thiss.attr('id') == childId && parent < 1);
            thiss.toggle( showC );
        }        
    });
    jQuery('#loader').css( "visibility", "hidden" );
}

Спасибо:)

Answer 1

Было бы проще, если бы у родителей (и детей) были классы, идентифицирующие их как таковые, но вы можете обойтись идентификаторами, если это будет необходимо. Я использую $ вместо jQuery, но вы можете изменить это обратно, если вам нужно.

// inputFieldId := Id of the inputField that contains the search-String
// tableId := Id of the table to be searched
function searchTable( inputFieldId, tableId ){
    var input = $('#' + inputFieldId).text().ToUpperCase();

    $('#loader').show();

    $('#' + tableId + ' tr').each( function(i) {
         var $this = $(this);
         var show = false;
         //  if ($this.hasClass('parent')) {  // would be nice
         if ($this.attr('id').indexOf('child') < 0) { // parent
             // note that text() here is the combined texts of all tds
             // adjust with :first if you really want to check only the first
             show = !($this.find('td').text().indexOf( input ) < 0);
         }
         $this.toggle( show );
    });

    $('#loader').hide();
}

Answer 2

1) Кэшируйте селектор, который вы создали несколько раз. Затем используйте переменную с этого момента в.

var $rows = jQuery('#' + tableId + ' tr:nth-child('+i+')' );

$rows.children()...

2) чтобы получить прямых детей, вы можете использовать «>» в ​​вашем селекторе

 var $rows = jQuery('#' + tableId + '>tr:nth-child('+i+')' );

Answer 3

var rowsCache = null;
function searchTable( inputFieldId, tableId ){

    var input = String(jQuery("#inputFieldId").val()).toUpperCase();

    if (rowsCache==null)
        rowsCache = jQuery( '#' + tableId + ' tr');

    jQuery('#loader').css( "visibility", "visible" );

    //if there are many rows is faster --
    //for(var i = (countRows-1); i >= 0; i--) {

    jQuery(rowsCache).each(function() {
        if ((jQuery(this).html().indexOf(input)!=-1)
        {
            ...
        }
    });
    jQuery('#loader').css( "visibility", "hidden" );
}