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

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

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

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

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

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

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

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

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

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