Jquery : แทรกข้อมูลในแถวของตาราง (tbody)

ใช้ในกรณีที่ต้องการแทรกข้อมูลลงใจตาราง เช่น เมื่อดึงข้อมูลมาจาก database ต้องการให้แสดงผลเป็นตารางโดยมีตารางอยู่แล้วดังภาพด้านล่าง

Selection_029

เวลาเลือกให้กำหนด id ของตาราง ตามด้วย tbody แล้วก็แทรกข้อมูลลงไป เหมือนตัวอย่างด้านล่าง

$("#table tbody").append("<tr><td>"+val.y_id+"</td><td>"+val.y_name+"</td></tr>");

 

ตัวอย่างโค้ด

<table class="table table-bordered" id="table">
  <thead>
      <th>ลำดับ</th>
      <th>ปี</th>
  </thead>
  <tbody></tbody>
</table>
    $.ajax({
        url: 'YearContent',
        dataType: 'json',
        type: 'get',
        success: function (data) {
            $("#detail").empty();
            $.each(data.data, function (index, val) {
                console.log(val.y_id);
                $("#table tbody").append("<tr><td>"+val.y_id+"</td><td>"+val.y_name+"</td></tr>");
            });
        }

    });

 

ผลลัพธ์
Selection_028