HTML ဇယားကွက်များကို အစဉ်လိုက် ဖြည့်ခြင်း

ကျွန်ုပ်တို့တွင် ဤကဲ့သို့သော အတွင်းပိုင်းအလွတ် HTML ဇယားကွက်တစ်ခု ရှိသည်ဆိုပါစို့။

html<table id="table"></table>

ဤဇယားကွက်ကို ဆဲလ်များဖြင့် ဖြည့်ပြီး ထိုဆဲလ်များအတွင်း ဂဏန်းများကို 1 မှ 9 အထိ အစဉ်လိုက် ဖြည့်ရန် ကြိုးစားကြည့်ပါမည်။ အောက်ပါသည် ကျွန်ုပ်တို့ ရရှိသင့်သည့် ရလဒ် နမူနာတစ်ခုဖြစ်ပါသည်။

html<table id="table">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

အကောင်အထည်ဖော်ခြင်းကို စတင်လိုက်ပါစို့။

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

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

for (let i = 0; i < 3; i++) {
  let tr = document.createElement('tr');
  
  for (let i = 0; i < 3; i++) {
    let td = document.createElement('td');
    td.textContent = 'x';
    tr.appendChild(td);
  }
  
  table.appendChild(tr);
}

ယခု စာလုံး 'x' အစား ဆဲလ်များအတွင်းသို့ ဂဏန်းများကို တိုးတက်သည့် အစီအစဥ်အတိုင်း ရေးသားရန် ပြောင်းလဲကြည့်ပါမည်။

ဤအတွက် အတွင်းပိုင်း ကွင်းဆက်၏ လှည့်ပတ်မှုတိုင်းတွင် တန်ဖိုးများကို အစဉ်လိုက် တိုးပေးမည့် နောက်ထပ် ရေတွက်ကိရိယာတစ်ခု မိတ်ဆက်ရန် လိုအပ်ပါသည်။ ဤကဲ့သို့ဖြစ်ပါသည်။

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

let k = 1; // ရေတွက်ကိရိယာ၏ ကနဦးတန်ဖိုး
for (let i = 0; i < 3; i++) {
  let tr = document.createElement('tr');
  
  for (let i = 0; i < 3; i++) {
    let td = document.createElement('td');
    
    td.textContent = k; // ရေတွက်ကိရိယာကို ဆဲလ်အတွင်းသို့ ရေးသားခြင်း
    k++; // ရေတွက်ကိရိယာကို တိုးခြင်း
    
    tr.appendChild(td);
  }
  
  table.appendChild(tr);
}