從數據庫中獲取數據並顯示到表

Question

（我已經問過這個，但是我過去的問題很令人困惑）我將向表顯示數據庫值。 我需要動態顯示它。 所有表都是動態的。

數據庫中的表：

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

輸出必須是：

      | 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

我已經使用jquery / ajax在每個單元格中僅通過單擊/懸停各個td來顯示它。 但是我想在頁面加載后像“ foreach語句”那樣自動顯示它..我不知道如何...

好吧，這是我的jQuery，用於通過單擊/懸停顯示值。

$('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);
     }
  });
});

這是我最后一個問題的鏈接。 使用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

這是@gjijo的答案，它的工作原理

$(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);
  }
});
});
});