javascript - Populating dynamic table row with dynamic select -

i created dynamic table using javascript. want appendchild cell of each row select.

first tried using in different populatetablecell function after creation of table finished. thought better code readability. couldn't succeed.

that's why tried populate in same function. however, populates last row.

<table id="informationtable">     <tr>         <th>userid</th>         <th>status</th>         <th>profile</th>     </tr> </table> 

here js tried...

    function setallusers(users){         //create array of options added         var array = ["normal","incident","major incident"];          //create select list         var selectlist = document.createelement("select");          //create , append options         (var = 0; < array.length; i++) {             var option = document.createelement("option");             option.value = array[i];             option.text = array[i];             selectlist.appendchild(option);         }          for(i = 0; < users.length-1; i++){             var table = document.getelementbyid('informationtable');             var row = document.createelement("tr");             row.id = users[i];                var cell0 = row.insertcell(0);             var cell1 = row.insertcell(1);             var cell2 = row.insertcell(2);              cell0.innerhtml = users[i];             cell0.value = users[i];              cell1.id=users[i]+"-status";             cell1.class="statusclass";              cell2.id=users[i]+"-profile";             cell2.class="profileclass";              cell2.appendchild(selectlist);              table.appendchild(row);         }     } 

i tried putting createelement('select'), createelement('option') , select.appendchild(option) inside "for" loop. time page never loads. found similar post , tried use it.

how dynamically insert table row select box options in table using javascript?

but here each rows appending due button click.

thanks answers. sincerely, alp

few things:

• it makes more sense add new column instead of appending profile cell, should add new column header , run insertcell 1 more time
• you should using classname, not class - class reserved word in javascript.
• unless users array contains html, should use textcontent instead of innerhtml performance reasons.
• you need run selectlist.clonenode(true) when append cell new copy of element each time.
• it expensive , pointless run var table = document.getelementbyid('informationtable'); on each iteration of loop, need handle 1 time during function's lifecycle - move top , outside loop

i don't have users array, here working example guess on array might (feel free replace let , const var if need to):

const users = [    ['1', 'active', 'bob'],    ['2', 'disabled', 'alice']  ];    function setallusers(users){      //create array of options added      const priorities = ["normal","incident","major incident"];  	const table = document.getelementbyid('informationtable');      //create select list      const selectlist = document.createelement("select");        //create , append options      (let = 0; < priorities.length; i++) {          const option = document.createelement("option");          option.value = priorities[i];          option.text = priorities[i];          selectlist.appendchild(option);      }        for(let = 0; < users.length; i++){          const row = document.createelement("tr");          row.id = 'user-'+users[i][0];                    const cell0 = row.insertcell(0);          const cell1 = row.insertcell(1);          const cell2 = row.insertcell(2);          const cell3 = row.insertcell(3);            cell0.textcontent = users[i][0];            cell1.id = users[i][1]+"-status";          cell1.classname = "statusclass";  		cell1.textcontent = users[i][1];                    cell2.id=users[i][2]+"-profile";          cell2.classname = "profileclass";  		cell2.textcontent = users[i][2];            cell3.appendchild(selectlist.clonenode(true));            table.appendchild(row);      }  }    setallusers(users)

<table id="informationtable">      <tr>          <th>userid</th>          <th>status</th>          <th>profile</th>          <th>priority</th>      </tr>  </table>