JavaScript में सरणी से HTML तालिका बनाना

मान लीजिए कि हमारे पास एक खाली तालिका है:

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

मान लीजिए कि हमें एक द्वि-आयामी सरणी भी दी गई है, उदाहरण के लिए, यह:

let arr = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];

आइए इस सरणी के आधार पर एक HTML तालिका बनाएं, जो इस सरणी के तत्वों से भरी हुई हो। यानी हमारे पास तीन पंक्तियों वाली एक तालिका होगी, जिनमें से प्रत्येक में 4 सेल होंगे।

आइए दो नेस्टेड for-of लूप का उपयोग करके समस्या का समाधान करें:

let arr = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]];
let table = document.querySelector('#table');

for (let subArr of arr) {
	let tr = document.createElement('tr');
	
	for (let elem of subArr) {
		let td = document.createElement('td');
		td.textContent = elem;
		tr.appendChild(td);
	}
	
	table.appendChild(tr);
}

जैसा कि आप देख रहे हैं, हमारा समाधान सार्वभौमिक निकला और यह उपसरणियों की संख्या और प्रत्येक उपसरणी में तत्वों की संख्या पर निर्भर नहीं करता है। एकमात्र शर्त यह है कि उपसरणियों में तत्वों की समान संख्या हो।

एक सरणी दी गई है:

let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [10, 11, 12]];

पाठ के सैद्धांतिक भाग में दिए बिना, दी गई सरणी के तत्वों को HTML तालिका table के रूप में प्रदर्शित करें।

पिछली समस्या को इस तरह संशोधित करें कि तालिका में तत्वों को नहीं, बल्कि इन तत्वों के वर्ग लिखे जाएं।