快速制作index.html,快速制作Javascript搜索功能

我做了一个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" );

}谢谢 :)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值