HTML ဇယားသို့ အတန်းများနှင့် ကော်လံများ ထည့်သွင်းခြင်း

ကျွန်ုပ်တို့တွင် HTML ဇယား #table တစ်ခု ရှိသည်ဆိုပါစို့။ ယင်းဇယားသို့ အတန်းအသစ်များနှင့် ကော်လံအသစ်များ ထည့်သွင်းနည်းကို လေ့လာကြပါစို့။

အတန်းများ ထည့်သွင်းခြင်း

အတန်းများ ထည့်သွင်းခြင်းသည် ခက်ခဲခြင်းမရှိပါ - tr တစ်ခုကို ဖန်တီးပြီး၊ ထို့နောက် ထိုအတန်းအတွင်း လိုအပ်သော ဆဲလ်အရေအတွက်ကို (3 ဟုဆိုပါစို့) ထည့်သွင်းမည့် ကွင်းဆက်တစ်ခုကို လုပ်ဆောင်ရန် လိုအပ်ပါသည်။

javascriptlet table = document.querySelector('#table');

let tr = document.createElement('tr');

for (let i = 1; i <= 3; i++) {
  let td = document.createElement('td');
  tr.appendChild(td);
}

table.appendChild(tr);
Задание 1

ခလုတ်တစ်ခု ပြုလုပ်ပါ၊ ထိုခလုတ်ကို နှိပ်လိုက်သည့်အခါ ဇယားထဲသို့ အတန်းအသစ်တစ်ခု ထပ်မံထည့်သွင်းပါစေ။

ကော်လံများ ထည့်သွင်းခြင်း

ကော်လံများ ထည့်သွင်းခြင်းမှာမူ အနည်းငယ် ပို၍ရှုပ်ထွေးပါသည်။ ဇယားရှိ အတန်းအားလုံးကို လှည့်ပတ်စစ်ဆေးပြီး၊ အတန်းတိုင်းသို့ ဆဲလ်အသစ်တစ်ခု ထည့်သွင်းမည့် ကွင်းဆက်တစ်ခုကို လုပ်ဆောင်ရန် လိုအပ်ပါသည်။

javascriptlet trs = document.querySelectorAll('#table tr');

for (let tr of trs) {
  let td = document.createElement('td');
  tr.appendChild(td);
}
Задание 2

2 အမြှောက် 2 အရွယ်အစားရှိသော ဇယားတစ်ခု ရှိပါသည်။

html<table id="table">
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>
csstd {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

ခလုတ်တစ်ခုလည်း ရှိပါသည်။ ခလုတ်ကို နှိပ်လိုက်သည့်အခါ ဇယားသည် အတန်းတစ်ခုနှင့် ကော်လံတစ်ခု ပိုမိုကြီးထွားလာစေရန် ပြုလုပ်ပါ။