For Android device For iOS device
២៧
តុលា

Search ទិន្នន័យ​នៅ​ក្នុង Table ដោយ​ប្រើ​ប្រាស់ JavaScript plugin

សួស្ដី សិស្សានុសិស្ស និង ប្រិយមិត្ត ដែល​និយម​គាំទ្រ មជ្ឈមណ្ឌលអាន-ANT www.antkh.com ទាំងអស់​គ្នា ។ លោកអ្នក​ដែល​បាន​សិក្សា​វគ្គ HTML, CSS ឬ​ក៏ JavaScript ​លោកអ្នក​ប្រហែលជាមានការងឿងឆ្ងល់ ឬ​ក៏​ចង់ដឹងហើយថា តើអ្នកអាច​ធ្វើការ search រក​ទិន្នន័យ​នៅ​ក្នុង HTML បាន​យ៉ាង​ដូចម្ដេច ? កុំបារម្ភនៅ​ក្នុង​អត្ថបទនេះ អាន- ANT យើង​ខ្ញុំ​នឹងលើយក plugin មួយរបស់ JavaScript មក​បង្ហាញ​លោកអ្នក ។ ការ​ប្រើ​ប្រាស់ plugin នេះធ្វើ​ឲ្យ​យើង​ងាយស្រួល​ក្នុង​ការ​ស្វែងរក​ទិន្នន័យ រហ័ស និងមិនមានការ refresh page

សូមចុច Like គេហទំព័រ www.antkh.com ដើម្បី​ទទួលបានអត្ថបទថ្មីៗ​ប្រចាំ​ថ្ងៃ​

សូមអនុវត្ដន៍តាមជំហានដូច​ខាងក្រោម​៖

១. ​បង្កើត file HTML ដាក់​ឈ្មោះ​ថា search.thml ហើយ​សរសេរ​កូដ​ខាងក្រោម​ចូលទៅ​ក្នុង <body> tag

២. ​សរសេរ​កូដ​ខាងក្រោម​បញ្ចូល​ទៅ​ក្នុង <header> tag 

៣. ​សរសេរ​កូដ JavaScript ​ខាងក្រោម​បញ្ចូល​ទៅ​ក្នុង <body> tag និងនៅ​ខាងក្រោម <div> tag ​ដែល​មាន id=”users” (​សរសេរ​នៅ​ខាងក្រោម​កូដ HTML ​ដែល​បាន​បង្ហាញ​នៅ​ចំណុច​ទី១) ពី​ព្រោះ​បើ​លោកអ្នក​សរសេរ​នៅ​ក្នុង <head> tag វាមិន​ដំណើរ​ការ​នោះទេ ។  

៤. ដើម្បី​ឲ្យ​វាមាន​លក្ខណៈ​ស្រស់​ស្អាត​លោកអ្នក គ្រាន់តែ​បង្កើត file មួយ​ឈ្មោះ style.css រួចហើយ​សរសេរ​កូដ​ខាងក្រោម​បញ្ចូល​

​បន្ទាប់មក​ទៀត​លោកអ្នក ហៅ stylesheet ទៅ​ប្រើ​នៅ​ក្នុង​ file HTML <head> tag ដូច​ខាងក្រោម​៖

៥. Run កូដរបស់​លោកអ្នក នឹងទទួលបាន​លទ្ធផល​ដូច​ខាងក្រោម​៖

 · Search ​ទិន្នន័យ​

· Short ​ទិន្នន័យ​

​លោកអ្នក​អាច search ​ឈ្មោះ ឬ​ក៏ ឆ្នាំ​ក៏​បាន មួយទៀត​លោកអ្នក​អាច short ​ទិន្នន័យ​បាន​ផងដែរ ។

ពន្យល់កូដ

  • HTML កូដៈ

- នៅបន្ទាត់ទី១១ id=”users” ​សម្រាប់​ក្ដោប​ទិន្នន័យ​ទាំងមូល​ដែល​ត្រូវ search និង short

- នៅបន្ទាត់ទី១២ class=”search” ​ធ្វើការ automatic ​ក្នុង​ការ search

- នៅបន្ទាត់ទី១៣ class=”short” ​ធ្វើការ automatic ​ក្នុង​ការ short

- នៅបន្ទាត់ទី១៣ ដ​ដែល data-sort="name" សម្រាប់​ដាក់​ទិន្នន័យ​ដែល​យើងចង់ short ហើយពេលនេះ​ខ្ញុំ short ​ឈ្មោះ​របស់ user (name)

- នៅបន្ទាត់ទី២៤ class=”list” ​សម្រាប់​ដាក់​ឲ្យ element របស់ container ក្លាយជា list items

- គ្រប់ elements ​ដែល​មាន class=”name” និង class=”born” ​នឹងត្រូវ​បានហៅទៅ​ប្រើ​ប្រាស់​នៅ​ក្នុង​កូដ JavaScript

  • JavaScript កូដៈ

- នៅបន្ទាត់ទី៥២ valueNames: [ 'name', 'born']  ​សម្រាប់​ដាក់​ទិន្នន័យ​ដែល​លោកអ្នក​ចង់ search ហើយ name និង born ជា​ឈ្មោះ​ class នៃ​ប្រភេទ​ទិន្នន័យ នៅ​ក្នុង​HTML

- នៅបន្ទាត់ទី៥៣ users គឺជា ID របស់ div ​ដែល​ក្ដោប​ទិន្នន័យ នៅបន្ទាត់ទី ១១

*** រៀបរៀងអត្ថបទដោយ៖ លោក សំ រិទ្ឋី ត្រួត​ពិនិត្យ និងកែ​សម្រួល​អត្ថបទដោយ៖ លោក ហេង ពេងលាប

*** មុខវិជ្ផា HTML+HTML5+Dreamweaver តម្លៃ ៥៥ដុល្លា ឬ ២២០០០០រៀល សម្រាប់ Course Outline នៃ​វគ្គ​ http://training.antkh.com/html.aspx

*** មុខវិជ្ផា Web Design with CSS + Bootstrap តម្លៃ ៨០ដុល្លា ឬ ៣២០០០០រៀល សម្រាប់ Course Outline នៃ​វគ្គ​នេះ http://training.antkh.com/website_design_with_css.aspx

*** សម្រាប់​ស្នាដៃសិស្ស​ដែល​បាន​បញ្ចប់​វគ្គ​គេហទំព័រជា​ច្រើន នៅអាន-ANT http://training.antkh.com/achievements/?c=web

*** សូម​ចូលរួម​ជាសមាជិក ANT Training Group ដើម្បី​តាមដានសម្មភាពប្រចាំ​ថ្ងៃ​ជាមួយអាន-ANT
*** ចុច Like គេហទំព័រ www.antkh.com ដើម្បី​ទទួលបានអត្ថបទថ្មីៗ​ដែល​ទាក់ទងនឹង​បច្ចេកវិទ្យា​រៀងរាល់​ថ្ងៃ​

មតិ និង​យោបល់​ទៅលើ​អត្ថបទ​នេះ (តាម Facebook)

ខាងក្រោម​នេះ​ជា​យោបល់​ផ្សេងៗ​របស់​អ្នកទស្សនា