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

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

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

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

<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' စာလုံးများဖြင့် ဖြည့်ထားသည့် ဇယားကွက်တစ်ခုကို အရင်ဆုံး ဖန်တီးကြည့်ပါမည်။

let 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' အစား ဆဲလ်များအတွင်းသို့ ဂဏန်းများကို တိုးတက်သည့် အစီအစဥ်အတိုင်း ရေးသားရန် ပြောင်းလဲကြည့်ပါမည်။

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

let 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);
}

အတိုင်းအတာ 5 အတန်း အမြှောက် 5 ကော်လံရှိပြီး ဆဲလ်များအတွင်း ဂဏန်းများကို 1 မှ 25 အထိ အစဉ်လိုက် ရှိသည့် HTML ဇယားကွက်တစ်ခုကို စခရင်ပေါ်တွင် �ုတ်ပြပါ။

ယခင်ပုစ္ဆာကို ဇယားကွက်၏ ဆဲလ်များတွင် 2 မှ 50 အကြားရှိ စုံကိန်းများ ရေးထားစေရန် �ြင်ဆင်မွမ်းမံပါ။