我做了一个JavaScript的搜索功能,以查找表中的字符串:
有一些“tr”只包含一个数字作为id,还有一些“tr”包含“childNode + idOfParentNode”作为id(例如:
... ... 现在我想查看表格,看看给出的字符串或它的一部分是否与父 - “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
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" );
}严重的是,这工作正常,但它需要永远!特别是如果它是一个更大的桌子,所以我想知道是否有人看到一种方法来使我的功能更快,更高效。
thnx提前:)
================================================== =======================
编辑:我做了它的工作...它现在看起来像这样,并奇妙地工作:)
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" );
}谢谢 :)