I have a HTML table like this and selection.

<select id="choose">
<option>1</option>
<option>2</option>
<option>3</option>
</select> 
<table id="num-table">
<thead>
  <th>num 1</th>
  <th>num 2</th>
  <th>num 3</th>
  <th>num 4</th>
</thead>
<tbody>
  <tr>
    <td>1</td>
     <td>1</td>
      <td>1</td>
  </tr>
  <tr>
    <td>2</td>
     <td>2</td>
      <td>2</td>
  </tr>
  <tr>
    <td>3</td>
     <td>3</td>
      <td>3</td>
  </tr>
</tbody>
</table>

And jquery code !.

$(document).ready(function(){
    //$('#num-table td:last-child').after('<td>4</td>')
  $('#choose').on('change',function(){
        var selected = $(this).val();
      $('#num-table tbody tr td:last').after(selected);
  })
})

I want to add selected values to last column(i.e num 4)in jQuery. However the value is added to last row in the last column but not on every row still it is blank. Any Explaination.

JSFiddle

CodePudding user response：

Working Demo

 $(document).ready(function () {
            var all = new Array();
            $('#choose').on('change', function () {
                var selected = $(this).val();
                var tr = document.querySelectorAll("#num-table tbody > tr");
                valueSet = false;
                $("#num-table tbody > tr").each(function (e) {
                    var tdLen = $(this).children().length;
                    if (tdLen < 4 && !valueSet) {
                        $(this).append(`<td>${selected}</td>`);
                        valueSet = true;
                        return true;
                    }
                });

            });
        })