inserting table rows data with jquery

Question

I want to add the td by using array and below is the given sample. How can I complete the <tr> tag with complete details available in an array.

$(document).ready(function() {
       $('#myTable > tbody:last-child').append('<tr><td>8:30am</td></tr>');  
var timing = ['14:30' , '21:00'];
  $.each(timing,function(i,v){
  //how can i enter the remaining data using array to complete the <tr> tag
  })
}
                  

 <table id="myTable" class="table">
                        <thead>
                            <tr>
                                <th>Morning</th>
                                <th>Afternoon</th>
                                <th>Evening</th>
                                 </tr>
                          </thead>
                        <tbody>
                            <tr id="months_row">
                                
                            </tr>
                        
                        </tbody>
                    </table>

Answer 1

Use Array#map method to generate the tr elements and append it to the previously created tr.

$(document).ready(function() {
  $('#myTable > tbody:last-child').append(
    // wrap to make it jQuery object
    $('<tr><td>8:30am</td></tr>')
    // append the td's to the tr  
    .append(
      // generate the td's array
      ['14:30', '21:00'].map(function(v) {
        // generate td with the text
        return $('<td>', {
          text: v
        });
      })
    )
  )
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" class="table">
  <thead>
    <tr>
      <th>Morning</th>
      <th>Afternoon</th>
      <th>Evening</th>
    </tr>
  </thead>
  <tbody>
    <tr id="months_row">

    </tr>

  </tbody>
</table>

---

Or by generating the HTML string to append.

$(document).ready(function() {
  $('#myTable > tbody:last-child').append(
    '<tr><td>8:30am</td>' + ['14:30', '21:00'].map(function(v) {
      return '<td>' + v + '</td>'
    }).join('') + '</tr>'
  )
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" class="table">
  <thead>
    <tr>
      <th>Morning</th>
      <th>Afternoon</th>
      <th>Evening</th>
    </tr>
  </thead>
  <tbody>
    <tr id="months_row">

    </tr>

  </tbody>
</table>