[英]Fetch data from database and display to table
(我已经问过这个,但是我过去的问题很令人困惑)我将向表显示数据库值。 我需要动态显示它。 所有表都是动态的。
数据库中的表:
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在表中显示从数据库到动态创建的文本字段的值
$(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();
});
}
});
});
这是@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);
}
});
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.