从数据库中获取数据并显示到表中答案

【问题标题】：Fetch data from database and display to table从数据库中获取数据并显示到表中
【发布时间】：2017-08-14 12:42:18
【问题描述】：

（我已经问过这个问题，但我过去的问题很令人困惑）我将在表中显示数据库值。我需要动态显示它。所有表格都是动态的。

数据库中的表：

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

这是我最后一个问题的链接..Display the value from database to dynamically created textfield in the table using jQuery

【问题讨论】：

codeigniter.com/user_guide/database/query_builder.html

标签： php jquery codeigniter html-table

【解决方案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();
      });
     }
  });
});

【讨论】：

【解决方案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);
  }
});
});
});

【讨论】：