HTML ცხრილის უჯრედების შეცვლა JavaScript-ში
დავუშვათ, გვაქვს გარკვეული HTML ცხრილი #table.
დავუშვათ, ჩვენს წინაშე დგას ამოცანა, რომ რაღაც გავაკეთოთ
ცხრილის თითოეულ უჯრედთან, მაგალითად, ჩავწეროთ
თითოეულ მათგანში ტექსტი '!'.
მოდით განვიხილოთ ამგვარი ამოცანის ამოხსნის ნიუანსები.
როგორც იცით, HTML ცხრილს აქვს ორგანზომილებიანი სტრუქტურა: არის რიგები და მათში უჯრედები. შესაძლებელია ჩვენი ამოცანა მოვაგვაროთ შემდეგნაირად: გადავუყვეთ ციკლით რიგებს და თითოეულ რიგში გადავუყვეთ ციკლით უჯრედებს და გავაკეთოთ მათთან ჩვენთვის საჭირო მოქმედება. ანუ, მოცემული ამოხსნის სქემა მსგავსია იმისა, თითქოს ჩვენ ვქმნიდით ასეთ ცხრილს, ვავსებდით მას რიგებით და უჯრედებით.
თუმცა, ამ შემთხვევაში, ორი ჩადგმული ციკლი
ზედმეტი იქნება: შესაძლებელია უბრალოდ მივიღოთ ყველა
td და გადავუყვეთ მათ ციკლით, შევასრულოთ
საჭირო ოპერაცია. გავაკეთოთ ეს:
let tds = document.querySelectorAll('#table td');
for (let td of tds) {
td.textContent = '!';
}
დავუშვათ, მოცემულია გარკვეული HTML ცხრილი რიცხვებით და ღილაკი. ღილაკზე დაწკაპუნებით გაზარდეთ რიცხვი ცხრილის თითოეულ უჯრედში ორჯერ.
