صفحه اصلی / تلگرام / اموزش ساخت جستجو در جدول با javascript – اموزش filter در جاوا اسکریپت

اموزش ساخت جستجو در جدول با javascript – اموزش filter در جاوا اسکریپت

اموزش ساخت جستجو در جدول با javascript

 اموزش filter در جاوا اسکریپت

با سلام خدمت شما بازدیدکنندگان گرامی مجله اینترنتی شماسافت در این پست از مبحث برنامه نویسی – جاوا اسکریپت قصد اموزش ساخت جستجو در جدول با javascript داریم که به کمک متد filter انجام میپذیرد این اموزش یک اموزش کاربردی و بسیار مهم برای توسعه دهندگان و طراحان وب اپلیکیشن می باشد چرا که به راحتی متوانند برای جداول ساده html یک جستجوگر حرفه ای طراحی کنند.

ساخت جستجو در جدول با javascript:

برای شروع کار ابتدا یک input از نوع تکست و همچنین یک جدول ساده به صفحه وب خود اضافه میکنیم کد های مورد نظر به شکل زیر خواهند بود.

 

 

اکنون برای انکه بتوانیم در ستون نام جستجو کنیم کافیست کدهای جاوا اسکریپت زیر را به صفحه خود اضافه کنید.

 

 

در کد بالا یک فانکشن به نام myfunction1 تعریف کردیم و در رویداد keyup یعنی هنگام تایپ کاربر در فیلد موجود رویداد را فراخوانی کردیم تا براساس متد فیلتر ستون نام جدول را براساس کلمات موجود فیلتر و یا درواقع مورد جستجو قرار دهد.

 

برای انکه در ستون دوم و نام کشور ها جستجو انجام شود می بایست [۰] به [۱] تغییر دهید.

 

پیشنمایش نهایی و نتیجه کد های بالا را در زیر میتوانید ببنید.

 

See the Pen search in html table using javascript by s,mohamamd hosein abedy (@shomasoft) on CodePen.

 

یک دیدگاه

  1. سلام مطلب بسیار مفیدی بود ممنون.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *