JavaScript দিয়ে HTML টেবিলের সেল পরিবর্তন করা
ধরুন একটি HTML টেবিল #table দেওয়া আছে।
ধরুন আমাদের কাজ হল টেবিলের প্রতিটি সেলের সাথে কিছু করা,
উদাহরণস্বরূপ, তাদের প্রতিটিতে '!' লেখা।
আসুন এই ধরনের সমস্যা সমাধানের সূক্ষ্ম বিষয়গুলি নিয়ে আলোচনা করি।
আপনি জানেন, একটি HTML টেবিলের একটি দ্বি-মাত্রিক গঠন রয়েছে: সারি আছে, এবং তাদের মধ্যে সেল আছে। আমরা নিম্নলিখিতভাবে আমাদের সমস্যার সমাধান করতে পারি: একটি লুপ দিয়ে সারিগুলি ঘুরে দেখুন এবং প্রতিটি সারিতে একটি লুপ দিয়ে সেলগুলি ঘুরে দেখুন এবং সেগুলির সাথে আমাদের প্রয়োজনীয় ক্রিয়া করুন। অর্থাৎ, সমাধানের প্রদত্ত স্কিমটি এমন যেমন আমরা টেবিলটি তৈরি করতাম, এটিকে সারি এবং সেল দিয়ে ভরাট করে।
যাইহোক, এই ক্ষেত্রে, দুটি নেস্টেড লুপ
অনাবশ্যক হবে: আমরা সহজভাবে সব td পেতে পারি
এবং একটি লুপ দিয়ে সেগুলি ঘুরে দেখতে পারি, প্রয়োজনীয়
অপারেশন সম্পাদন করে। আসুন এটি করি:
let tds = document.querySelectorAll('#table td');
for (let td of tds) {
td.textContent = '!';
}
ধরুন সংখ্যা সহ একটি HTML টেবিল এবং একটি বাটন দেওয়া আছে। বাটনে ক্লিক করলে টেবিলের প্রতিটি সেলের সংখ্যা দুই গুণ বাড়িয়ে দিন।
