జావాస్క్రిప్ట్‌లో పట్టికను ఎలా ఫిల్టర్ చేయాలి

Javaskript Lo Pattikanu Ela Philtar Ceyali



పేజీలో పెద్ద HTML పట్టికను సృష్టిస్తున్నప్పుడు, మెరుగైన వినియోగదారు అనుభవం కోసం ఫిల్టర్ కార్యాచరణను చేర్చడం ముఖ్యం. దీన్ని చేయడానికి, శోధన పెట్టెలో ఏదైనా పట్టిక రికార్డును శోధించడం ద్వారా పట్టికలోని రికార్డులను ఫిల్టర్ చేయడానికి JavaScriptని ఉపయోగించండి. అదనంగా, JavaScript కోడ్ సమర్థవంతంగా పని చేయడానికి తక్కువ కోడ్ లైన్లను అందిస్తుంది.

ఈ బ్లాగ్ పోస్ట్ జావాస్క్రిప్ట్‌లో పట్టికను ఫిల్టర్ చేసే ప్రక్రియను నిర్వచిస్తుంది.

జావాస్క్రిప్ట్‌లో టేబుల్‌ని ఫిల్టర్ చేయడం ఎలా?

జావాస్క్రిప్ట్‌లో పట్టికను ఎలా ఫిల్టర్ చేయాలో వివరించే ఉదాహరణను చూద్దాం.







ఉదాహరణ
ముందుగా, HTML డాక్యుమెంట్‌లో సెర్చ్ బార్‌ను క్రియేట్ చేయండి onkeyup 'అని పిలిచే ఆస్తి' filterTableFunc() 'కీని విడుదల చేసినప్పుడు:



< ఇన్పుట్ రకం = 'వచనం' id = 'వెతకండి' onkeyup = 'filterTableFunc()' ప్లేస్‌హోల్డర్ = 'వెతకండి.....' >< br >< br >

ఉపయోగించి ఉద్యోగి డేటాను నిల్వ చేసే పట్టికను సృష్టించండి <పట్టిక> ట్యాగ్ చేసి, ఐడిని కేటాయించండి' ఉద్యోగి డేటా ”:



< టేబుల్ ఐడి = 'ఉద్యోగి డేటా' సరిహద్దు = '1' >
< tr >
< > పేరు >
< > ఇమెయిల్ >
< > లింగం >
< > హోదా >
< > చేరిన తేది >
tr >
< tr >
< td > జాన్ td >
< td > జాన్ @ gmail. తో td >
< td > పురుషుడు td >
< td > CPA td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > స్టీఫెన్ td >
< td > స్టీఫెన్ @ gmail. తో td >
< td > పురుషుడు td >
< td > HRM td >
< td > ఇరవై ఒకటి / 10 / 2020 td >
tr >
< tr >
< td > పెద్దది td >
< td > mari78 @ gmail. తో td >
< td > స్త్రీ td >
< td > HRM td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > రోండా td >
< td > రోండా12 @ హాట్మెయిల్. తో td >
< td > పురుషుడు td >
< td > CFA td >
< td > 23 / 06 / 2022 td >
tr >
పట్టిక >

HTML ఫైల్‌ను అమలు చేసిన తర్వాత, అవుట్‌పుట్ ఇలా కనిపిస్తుంది:





ఆ తర్వాత, ఫిల్టర్ టేబుల్‌కు కార్యాచరణను జోడిద్దాం. జావాస్క్రిప్ట్ స్క్రిప్ట్ ఫైల్ లేదా ట్యాగ్‌లో, శోధన ఆధారంగా పట్టిక డేటాను ఫిల్టర్ చేసే క్రింది కోడ్‌ను ఉపయోగించండి:



ఫంక్షన్ filterTableFunc ( ) {
ఉంది ఫిల్టర్ ఫలితం = పత్రం. getElementById ( 'వెతకండి' ) . విలువ . లోయర్కేస్ వరకు ( ) ;
ఉంది ఖాళీ పట్టిక = పత్రం. getElementById ( 'ఉద్యోగి డేటా' ) ;
ఉంది tr = ఖాళీ పట్టిక. getElementsByTagName ( 'tr' ) ;
కోసం ( ఉంది i = 1 ; i < tr. పొడవు ; i ++ ) {
tr [ i ] . శైలి . ప్రదర్శన = 'ఏదీ లేదు' ;
స్థిరంగా tdArray = tr [ i ] . getElementsByTagName ( 'td' ) ;
కోసం ( ఉంది జె = 0 ; జె - 1 ) {
tr [ i ] . శైలి . ప్రదర్శన = '' ;
బ్రేక్ ;
}
}
}
}

పైన ఇచ్చిన కోడ్‌లో:

  • ముందుగా, ఒక ఫంక్షన్ నిర్వచించండి ' filterTableFunc() ”.
  • శోధన పట్టీని దాని ఐడిని ఉపయోగించి యాక్సెస్ చేయండి ' వెతకండి ” ఎంటర్ చేసిన విలువను పొందడానికి మరియు దానిని ఉపయోగించి చిన్న అక్షరానికి మార్చండి లోయర్కేస్() ” పద్ధతి.
  • దాని ఐడిని ఉపయోగించి ఫిల్టర్ ఆపరేషన్ నిర్వహించబడే పట్టికకు సూచనను పొందండి ' ఉద్యోగి డేటా ”.
  • ఆపై, 'ని ఉపయోగించి పట్టిక వరుసలను పొందండి getElementsByTagName ” పద్ధతి.
  • పట్టికను దాని పొడవు వరకు మళ్ళించండి, ప్రతి పట్టిక నమోదు కోసం డేటాను పొందండి మరియు పట్టిక యొక్క నిల్వ చేయబడిన విలువ శోధించిన విలువకు సమానంగా ఉందో లేదో తనిఖీ చేయండి. అది ఉంటే, దానిని ప్రదర్శించండి.

అవుట్‌పుట్

ఫిల్టర్ ఆపరేషన్ టేబుల్‌కి విజయవంతంగా వర్తింపజేయబడిందని పై అవుట్‌పుట్ సూచిస్తుంది.

ముగింపు

పట్టిక డేటా ద్వారా పునరావృతం చేయడం మరియు సంబంధిత డేటాను తిరిగి ఇవ్వడం ద్వారా జావాస్క్రిప్ట్‌లో పట్టికను ఫిల్టర్ చేయవచ్చు. ఈ ఫిల్టరింగ్ ఒక నిర్దిష్ట ఈవెంట్ ద్వారా పిలువబడే ఫంక్షన్ ద్వారా చేయబడుతుంది. ఇన్‌పుట్ టెక్స్ట్ ఫీల్డ్‌లో కేస్ సెన్సిటివిటీతో సంబంధం లేకుండా, నమోదు చేసిన ఒకే డేటాపై, టేబుల్ నుండి సంబంధిత డేటా పొందబడే విధంగా ఈ విధానం పని చేస్తుంది. ఈ పోస్ట్ జావాస్క్రిప్ట్‌లో పట్టికను ఫిల్టర్ చేయడానికి ఉపయోగించే విధానాన్ని వివరిస్తుంది.