Kuunda Jedwali la HTML Kutoka kwa Safu ya Vitu

Acha tuwe na safu fulani ya vitu, kwa mfano, safu hii ya watumiaji:

javascriptlet watumiaji = [
  {
    jina: 'jina1',
    uanamama: 'uanamama1',
    patronimiki: 'patronimiki1'
  },
  {
    jina: 'jina2',
    uanamama: 'uanamama2',
    patronimiki: 'patronimiki2'
  },
  {
    jina: 'jina3',
    uanamama: 'uanamama3',
    patronimiki: 'patronimiki3'
  },
];

Wacha tufanye jedwali la HTML kutoka kwa safu hii, katika kila safu tutaandika data ya mtumiaji mmoja mmoja.

Kwa muundo kama huu wa kuhifadhi data kawaida huwasha kitanzi kimoja kwenye safu na kuunda kiini kila kimoja cha jedwali kwa mikono, kama hivi:

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

javascriptlet jedwali = document.getElementById('jedwali');

for (let mtumiaji of watumiaji) {
  let tr = document.createElement('tr');
  
  let td1 = document.createElement('td');
  td1.textContent = mtumiaji.jina;
  tr.appendChild(td1);
  
  let td2 = document.createElement('td');
  td2.textContent = mtumiaji.uanamama;
  tr.appendChild(td2);
  
  let td3 = document.createElement('td');
  td3.textContent = mtumiaji.patronimiki;
  tr.appendChild(td3);
  
  jedwali.appendChild(tr);
}

Mbinu hii inatoa umbikivu mkubwa - tunaweza tuweza kudhibiti mpangilio wa data kwenye viini vya jedwali (tunaweza, kwa mfano, kubadilishana maeneo jina na uanamama).

Zaidi ya hayo, tukitaka tunaweza kuweka matukio kwenye viini fulani. Kwa mfano, inavezekana kuweka kitendo fulani kwenye kiini cha uanamama kwa kubonyeza na kadhalika.

javascriptlet wafanyikazi = [
  {jina: 'mfanyikazi1', umri: 30, mshahara: 400},
  {jina: 'mfanyikazi2', umri: 31, mshahara: 500},
  {jina: 'mfanyikazi3', umri: 32, mshahara: 600},
];