如何动态填充表格中的单元格？

Question

How do I fill a cell in the table dynamically after the user selects an option within the column?

Inside the select there is an update function and it is working, but I can't update column two of the line with the data given value of the select.

 function update(line) { // update in the col of mytable for next col. // whats wrong with this code? // Why not working? var td = line.closest('td'); td.nextSibling.innerText = line.value; }

 <table id="myTable"> <thead> <tr> <td>Selection</td> <td>Value</td> </tr> </thead> <tbody> <tr> <td> <div class='form-group col-md-12 col-xs-12'> <select id="item1" onChange='update(this)' class='options' name='choice'> <option value='option1'>option1</option> <option value='option2'>option2</option> <option value='option3'>option3</option> <option value='option4'>option4</option> </select> </div> </td> <td id='emilio'> 1 </td> </tr> <tr> <td> <div class='form-group col-md-12 col-xs-12'> <select id="item1" onChange='update(this)' class='options' name='choice'> <option value='option1'>option1</option> <option value='option2'>option2</option> <option value='option3'>option3</option> <option value='option4'>option4</option> </select> </div> </td> <td> 2 </td> </tr> </tbody> </table>

Answer 1

Since the onChange is working, you need to select the containing td then update then next one like:

function onChange(update) {
            var td = update.closest('td');
            td.nextElementSibling.innerText = update.value;
        }

Answer 2

Your function name should be update, try this

 function update(e) { //update in the col of mytable for 0 if( e.id ==='item1'){ document.getElementById('selection1').innerHTML= e.value }else{ document.getElementById('selection2').innerHTML= e.value } }

 <table id="myTable"> <thead> <tr> <td>Selection</td> <td>Value</td> </tr> </thead> <tbody> <tr> <td> <div class='form-group col-md-12 col-xs-12'> <select id="item1" onChange='update(this)' class='options' name='choice'> <option value='1'>option1</option> <option value='2'>option2</option> <option value='3'>option3</option> <option value='4'>option4</option> </select> </div> </td> <td id='selection1'> 1 </td> </tr> <tr> <td> <div class='form-group col-md-12 col-xs-12'> <select id="item2" onChange='update(this)' class='options' name='choice'> <option value='option1'>option1</option> <option value='option2'>option2</option> <option value='option3'>option3</option> <option value='option4'>option4</option> </select> </div> </td> <td id='selection2' ></td> </tr> </tbody> </table>