یہ بلاگ پوسٹ جاوا اسکرپٹ میں ٹیبل کو فلٹر کرنے کے عمل کی وضاحت کرے گی۔
جاوا اسکرپٹ میں ٹیبل کو کیسے فلٹر کیا جائے؟
آئیے ایک مثال دیکھتے ہیں کہ جاوا اسکرپٹ میں ٹیبل کو کیسے فلٹر کیا جائے۔
مثال
سب سے پہلے، ایک HTML دستاویز میں ایک سرچ بار بنائیں جس میں ' onkeyup ' جائیداد جو کہتی ہے ' filterTableFunc() 'جب کلید جاری کی جاتی ہے:
< ان پٹ کی قسم = 'متن' آئی ڈی = 'تلاش' onkeyup = 'filterTableFunc()' پلیس ہولڈر = 'تلاش.....' >< بی آر >< بی آر >
ایک ٹیبل بنائیں جو ملازمین کے ڈیٹا کو استعمال کرتے ہوئے محفوظ کرے۔ <ٹیبل> ٹیگ کریں، اور ایک آئی ڈی تفویض کریں ' ملازم کا ڈیٹا ”:
< ٹیبل آئی ڈی = 'ملازم کا ڈیٹا' سرحد = '1' >
< tr >
< ویں > نام ویں >
< ویں > ای میل ویں >
< ویں > صنف ویں >
< ویں > عہدہ ویں >
< ویں > شامل ہونے کی تاریخ ویں >
tr >
< tr >
< td > جان td >
< td > جان @ جی میل کے ساتھ td >
< td > مرد td >
< td > سی پی اے td >
< td > 5 / 5 / 2020 td >
tr >
< tr >
< td > سٹیفن td >
< td > سٹیفن @ جی میل کے ساتھ td >
< td > مرد td >
< td > HRM td >
< td > اکیس / 10 / 2020 td >
tr >
< tr >
< td > بڑا td >
< td > mari78 @ جی میل کے ساتھ td >
< td > عورت td >
< td > HRM td >
< td > 16 / 05 / 2022 td >
tr >
< tr >
< td > رونڈا td >
< td > rhonda12 @ ہاٹ میل کے ساتھ td >
< td > مرد td >
< td > سی ایف اے td >
< td > 23 / 06 / 2022 td >
tr >
ٹیبل >
HTML فائل کو چلانے کے بعد، آؤٹ پٹ اس طرح نظر آئے گا:
اس کے بعد، آئیے فلٹر ٹیبل میں فعالیت شامل کریں۔ JavaScript اسکرپٹ فائل یا ٹیگ میں، نیچے دیا گیا کوڈ استعمال کریں جو تلاش کی بنیاد پر ٹیبل کے ڈیٹا کو فلٹر کرے گا:
فنکشن filterTableFunc ( ) {
تھا فلٹر نتیجہ = دستاویز getElementById ( 'تلاش' ) . قدر . لوئر کیس میں ( ) ;
تھا empTable = دستاویز getElementById ( 'ملازم کا ڈیٹا' ) ;
تھا tr = empTable. getElementsByTagName ( 'tr' ) ;
کے لیے ( تھا میں = 1 ; میں < tr لمبائی ; میں ++ ) {
tr [ میں ] . انداز . ڈسپلے = 'کوئی نہیں' ;
const tdArray = tr [ میں ] . getElementsByTagName ( 'ٹی ڈی' ) ;
کے لیے ( تھا جے = 0 ; جے - 1 ) {
tr [ میں ] . انداز . ڈسپلے = '' ;
توڑنا ;
}
}
}
}
اوپر دیئے گئے کوڈ میں:
- سب سے پہلے، ایک فنکشن کی وضاحت کریں ' filterTableFunc() '
- اس کی آئی ڈی کا استعمال کرتے ہوئے سرچ بار تک رسائی حاصل کریں۔ تلاش کریں درج کردہ قدر حاصل کرنے اور اسے چھوٹے حروف میں تبدیل کرنے کے لیے ' toLowerCase() 'طریقہ.
- اس ٹیبل کا حوالہ حاصل کریں جہاں اس کی آئی ڈی کا استعمال کرتے ہوئے فلٹر آپریشن کیا جائے گا۔ ملازم کا ڈیٹا '
- پھر، 'کا استعمال کرتے ہوئے ٹیبل کی قطاریں حاصل کریں getElementsByTagName 'طریقہ.
- ٹیبل کے ذریعے اس کی لمبائی تک دہرائیں، ہر ٹیبل کے اندراج کے لیے ڈیٹا حاصل کریں، اور چیک کریں کہ آیا ٹیبل کی ذخیرہ شدہ قدر تلاش کی گئی قدر کے برابر ہے۔ اگر یہ ہے، تو اسے ظاہر کریں.
آؤٹ پٹ
مندرجہ بالا آؤٹ پٹ اشارہ کرتا ہے کہ فلٹر آپریشن کامیابی کے ساتھ میز پر لاگو کیا گیا ہے.
نتیجہ
جاوا اسکرپٹ میں ایک ٹیبل کو فلٹر کیا جا سکتا ہے ٹیبل ڈیٹا کے ذریعے تکرار کرکے اور متعلقہ ڈیٹا کو واپس کر کے۔ یہ فلٹرنگ ایک فنکشن کے ذریعے کی جاتی ہے جسے کسی مخصوص ایونٹ پر بلایا جاتا ہے۔ یہ نقطہ نظر اس طرح کام کرے گا کہ داخل کردہ ایک جیسے ڈیٹا پر، ان پٹ ٹیکسٹ فیلڈ میں کیس کی حساسیت سے قطع نظر، ٹیبل سے متعلقہ ڈیٹا حاصل کیا جاتا ہے۔ یہ پوسٹ ایک ایسے نقطہ نظر کی وضاحت کرتی ہے جسے جاوا اسکرپٹ میں ٹیبل کو فلٹر کرنے کے لیے استعمال کیا جا سکتا ہے۔