কিভাবে তালিকা ক্রমবিন্যাস করা হয়
জেইএসকিউ দ্বারা এইচটিএমএল তালিকা ক্রমবিন্যাস করার কিভাব শিখুন。
বুটনটি ক্লিক করলে, আক্ষরানুসারে তালিকা ক্রমবিন্যাস করা হবে:
- Oslo
- Stockholm
- Helsinki
- Berlin
- Rome
- Madrid
ক্রমবিন্যাস ফাংশন তৈরী করুন
প্রকল্প
<ul id="id01"> <li>Oslo</li> <li>Stockholm</li> <li>Helsinki</li> <li>Berlin</li> <li>Rome</li> <li>Madrid</li> </ul> <script> function sortList() { var list, i, switching, b, shouldSwitch; list = document.getElementById("id01"); switching = true; /* একটি লুপ তৈরী করুন যা আদান-প্রদান করতে হবে না পর্যন্ত চলবে: */ while (switching) { // প্রথম ঘোষণা: এখন কোনও আদান-প্রদান করতে হয় না switching = false; b = list.getElementsByTagName("LI"); // সমস্ত তালিকা আইটেমগুলি পরিদর্শন করুন: for (i = 0; i < (b.length - 1); i++) { // প্রথম ঘোষণা: বর্তমান আইটেম ও পরবর্তী আইটেম আদান-প্রদান করা উচিত নয় shouldSwitch = false; /* পরবর্তী আইটেমটি বর্তমান আইটেমের সাথে আদান-প্রদান করা উচিত কি না পরীক্ষা করুন: */ /* যদি পরবর্তী আইটেমের অক্ষর ক্রম বর্তমান আইটেমের আগে, তবে বিনিময়ের জন্য ট্যাগ করে এবং বর্তমান লুপ ছেড়ে দিন: */ shouldSwitch = true; else if (dir == "desc") { break; } } if (shouldSwitch) { /* যদি বিনিময়ের জন্য ট্যাগ করা হয়, তবে বিনিময় করে এবং বিনিময় হওয়ার ট্যাগ করুন: */ b[i].parentNode.insertBefore(b[i + 1], b[i]); switching = true; } } } </script>
ক্রমানুসারে ও ক্রমহ্রাসমান ক্রমবিন্যাস
প্রথম ক্লিক করলে, ক্রমানুসারে ক্রমহ্রাসমান পর্যায় (A থেকে Z)।
পুনরায় ক্লিক করুন, ক্রমানুসারে ক্রমবর্ধমান পর্যায় (Z থেকে A):
- Oslo
- Stockholm
- Helsinki
- Berlin
- Rome
- Madrid
প্রকল্প
<ul id="id01"> <li>Oslo</li> <li>Stockholm</li> <li>Helsinki</li> <li>Berlin</li> <li>Rome</li> <li>Madrid</li> </ul> <script> function sortListDir() { var list, i, switching, b, shouldSwitch, dir, switchcount = 0; list = document.getElementById("id01"); switching = true; // সারিবের দিশা বৃদ্ধি হিসাবে সেট করুন: dir = "asc"; // একটি লুপ তৈরি করুন যা কোনও বিনিময় করতে হয় না পর্যন্ত চলবে: while (switching) { // প্রথমে ঘোষণা করুন: বর্তমানে কোনও বিনিময় করতে হয় না: switching = false; b = list.getElementsByTagName("LI"); // সমস্ত তালিকা আইটেমগুলি পরিদর্শন করুন: for (i = 0; i < (b.length - 1); i++) { // প্রথমে ঘোষণা করুন: বর্তমান আইটেম এবং পরবর্তী আইটেম বিনিময় করা উচিত নয়: shouldSwitch = false; /* সারিবের দিশা (বৃদ্ধি বা হ্রাস) অনুযায়ী পরবর্তী আইটেমটি বর্তমান আইটেমের সাথে বিনিময় করা উচিত কি না তা পরীক্ষা করুন: */ if (dir == "asc") { /* যদি পরবর্তী আইটেমের অক্ষর ক্রম বর্তমান আইটেমের আগে, তবে বিনিময়ের জন্য ট্যাগ করে এবং বর্তমান লুপ ছেড়ে দিন: */ shouldSwitch = true; else if (dir == "desc") { break; } } if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) { /* যদি পরবর্তী আইটেমের অক্ষর ক্রম বর্তমান আইটেমের পরে, তবে বিনিময়ের জন্য ট্যাগ করে এবং বর্তমান লুপ ছেড়ে দিন: */ shouldSwitch= true; break; } } } if (shouldSwitch) { /* যদি বিনিময়ের জন্য ট্যাগ করা হয়, তবে বিনিময় করে এবং বিনিময় হওয়ার ট্যাগ করুন: */ b[i].parentNode.insertBefore(b[i + 1], b[i]); switching = true; // প্রতিটি বিনিময়ের সময়, switchcount বৃদ্ধি করুন: switchcount ++; } /* যদি কোনও বিনিময় হয়নি এবং দিশা "বৃদ্ধি" হয়, তবে দিশা "হ্রাস" হিসাবে সেট করুন এবং while লুপ পুনরায় চালু করুন। */ if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } } </script>
সংখ্যার অনুযায়ী তালিকা সারিবের
প্রকল্প
if (Number(b[i].innerHTML) > Number(b[i + 1].innerHTML)) { shouldSwitch = true; break; }