Fetch data from database and display to table

Question

(I already asked this but my past question is quite confusing) Im going to display database values to the table. I need to display it dynamically. All the tables are dynamic.

The tables in database:

Items Table:
itemID | Item Name
   1   |   item1
   2   |   item2
   3   |   item3
   4   |   item4
   5   |   item5 ..and so on

SkillSet Table:
skillID| Skill Name
   1   |   CS
   2   |   IT
   3   |   ES
   4   |   IS .. and so on

Values Table:
valueID | itemID | skillID | values
   1    |    1   |    1    |    0
   2    |    1   |    2    |    1
   3    |    1   |    3    |    4
   4    |    1   |    4    |    4
   5    |    2   |    1    |    3
   6    |    2   |    2    |    0
   7    |    2   |    3    |    2
   8    |    2   |    4    |    2 .. and so on

the output must be:

      | itm1 | itm2 | itm3 | itm4 | itm5
------|------|------|------|------|-----
CS    |    0 |    3 |    1 |    4 |   0
------|------|------|------|------|-----
IT    |    1 |    0 |    4 |    2 |   0
------|------|------|------|------|-----
ES    |    4 |    2 |    3 |    0 |   1
------|------|------|------|------|-----
IS    |    4 |    2 |    3 |    0 |   1

I've done it using a jquery/ajax to display it in each cell only by clicking/hovering each respective td's. But i want to display it automatically as soon as the page loaded like what "foreach statement" do so.. i dont know how...

well, this is my jquery for displaying values by clicking/hovering.

$('tbody tr td').click(function(){
  var row = $(this).closest('td');
  var skill = row.find('.skillID').val();
  var index = row.index();
  var item = $('table thead tr').find('td').eq(index).val();

  $.ajax({
   type: "POST",
   url: "<?php echo base_url(); ?>controller/get_level",
   data: {'skillID':skill,'itemID':item},
   cache: false,
   success: function(data){
      row.find("input[type=text]").attr("value",data);
     }
  });
});

Here's the link of my last question.. Display the value from database to dynamically created textfield in the table using jQuery

Answer 1

$(document).ready(function(){
  $.ajax({
   type: "POST",
   url: "<?php echo base_url(); ?>controller/get_level",
   data: {'skillID':skill,'itemID':item},
   cache: false,
   success: function(data){
      $.each(data, function(index){
        //If you receive the data in JSON format than this keyword would be a row data.
        var row = this;
        //You can now prepare a string of data and set it to your DOM like $("#tableID").html();
      });
     }
  });
});

Answer 2

this was the answer from @gjijo, and its working

$(function() {
$('tbody tr td').each(function() {
var col = $(this);
var skill = col.find('.skillID').val();
var index = col.index();
var item = $('table thead tr').find('td').eq(index).text();

console.log('Skill_ID - ' + skill + ';\nItem_ID - ' + item);
$.ajax({
  type: "POST",
  url: "<?php echo base_url(); ?>controller/get_level",
  data: {
    'Skill_ID': skill,
    'Item_ID': item
  },
  cache: false,
  success: function(data) {
    col.find("input[type=text]").val("Level " + data);
  }
});
});
});