<select>筛选<table>的简单实现-优快云博客

本文介绍了一种通过JavaScript实现的订单表格筛选功能，包括付款方式和处理状态的动态过滤。通过对选择器的监听来更新表格的显示内容，使得用户能够快速定位到所需的订单信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//-----------付款方式的显示

function showselect(){
var num=$(selectmodel).selectedIndex;
var trarray=$("tablebody").getElementsByTagName("tr");
//--------------显示所有tr
for(var i=0;i<trarray.length;i++){
trarray[i].style.display="";
}

switch(num)
{
case 1:for(var i=0;i<trarray.length;i++){
if(trarray[i].cells[7].innerHTML.trim()!="货到付款")
{trarray[i].style.display="none";}
}
break
case 2:
for(var i=0;i<trarray.length;i++){
if(trarray[i].cells[7].innerHTML.trim()!="款到付货")
{trarray[i].style.display="none";}
}
break
case 3:
for(var i=0;i<trarray.length;i++){
if(trarray[i].cells[7].innerHTML.trim()!="预付款到付货")
{trarray[i].style.display="none";}
}
break
default:
break
}

}

//-----------处理状态的显示

function showstatus(){
var num=$(selectstatus).selectedIndex;
var trarray=$("tablebody").getElementsByTagName("tr");
//--------------显示所有tr
for(var i=0;i<trarray.length;i++){
trarray[i].style.display="";
}

switch(num)
{
case 1:for(var i=0;i<trarray.length;i++){
if(trarray[i].cells[9].innerHTML.trim()!="未处理")
{trarray[i].style.display="none";}
}
break
case 2:
for(var i=0;i<trarray.length;i++){
if(trarray[i].cells[9].innerHTML.trim()!="未发货")
{trarray[i].style.display="none";}
}
break
case 3:
for(var i=0;i<trarray.length;i++){
if(trarray[i].cells[9].innerHTML.trim()!="已发货")
{trarray[i].style.display="none";}
}
break
case 4:
for(var i=0;i<trarray.length;i++){
if(trarray[i].cells[9].innerHTML.trim()!="预付款到")
{trarray[i].style.display="none";}
}
break
case 5:
for(var i=0;i<trarray.length;i++){
if(trarray[i].cells[9].innerHTML.trim()!="已付款")
{trarray[i].style.display="none";}
}
break
case 6:
for(var i=0;i<trarray.length;i++){
if(trarray[i].cells[9].innerHTML.trim()!="已了结")
{trarray[i].style.display="none";}
}
break
default:
break
}
}