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

以下是我上一个问题的链接.. 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

这是@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);
  }
});
});
});

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

2 个答案: