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

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

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

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

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

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

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

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

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

for (let tr of trs) {
	let td = document.createElement('td');
	tr.appendChild(td);
}

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

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

td {
	width: 50px;
	height: 50px;
	border: 1px solid black;
}

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