JavaScript တွင် HTML ဇယားများဖန်တီးခြင်း

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

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

ဤဇယားကို အတန်းများနှင့် ကော်လံများဖြင့် ဖြည့်စွက်ကြပါစို့။ ကျွန်ုပ်တို့ ရရှိသင့်သော ရလဒ်၏ နမူနာတစ်ခုမှာ ဤသို့ဖြစ်သည်။

<table id="table">
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td></td>
		<td></td>
		<td></td>
	</tr>
</table>

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

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');
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

အချည်းနှီးဖြစ်သော HTML ဇယားတစ်ခု ပေးထားသည်။ အဆင့်ဆင့် ထည့်သွင်းထားသော ကွင်းဆက်နှစ်ခု for ကို အသုံးပြု၍ ဤ ဇယားကို အတန်း 5 ခုနှင့် ကော်လံ 5 ခုဖြင့် ဖြည့်စွက်ပါ။

ယခင်လုပ်ဆောင်ချက်ကို အတန်း 10 ခု နှင့် ကော်လံ 5 ခုရှိသော ဇယားတစ်ခုကို ဖန်တီးရန် ပြုပြင်ပါ။

ယခင်လုပ်ဆောင်ချက်ကို ပြုပြင်ပြီး td တစ်ခုစီအတွင်း 'x' စာသားကို ထည့်သွင်းပါ။

ဇယားများကို ထုတ်လုပ်ပေးသော ကိရိယာတစ်ခုကို အကောင်အထည်ဖော်ပါ၊ ဇယား၏ အနံနှင့် အမြင့်ကို အဝင်ခံနှစ်ခုတွင် သတ်မှတ်ပေးရမည် (ဥပမာအားဖြင့်၊ �ဲလ် 5 ခု နှင့် 10 ခု ဇယား)။