我将使用JQuery显示从数据库到动态创建的文本字段到每个表单元格的值。 (请注意,要显示的取值Im并不完全相同。)“ lvl”(例如lvl1或lvl2)是数据库中的值,而不是ID或文本字段的类别。
这是它的样子。
| itm1 | itm2 | itm3 | itm4 | itm5
------|------|------|------|------|-----
skill1| lvl2 | lvl3 | lvl1 | lvl4 | lvl0
------|------|------|------|------|-----
skill2| lvl1 | lvl0 | lvl4 | lvl2 | lvl1
------|------|------|------|------|-----
skill3| lvl4 | lvl2 | lvl3 | lvl0 | lvl1
我的JQuery
$('tbody tr td').click(function(){
var row = $(this).closest('td');
var skill = row.find('.skillID').val();
var item = row.parent().children().index(row);
$.ajax({
type: "POST",
url: "<?php echo base_url(); ?>controller/get_level",
data: {'Skill_ID':skill,'Item_ID':item},
cache: false,
success: function(data){
alert("Level "+data);
}
});
});
上面的代码成功完成了警报并单击了func,但是我需要通过单击“ td”在文本字段中显示数据,或者在加载页面时,该值将自动显示。
视图,
<thead>
<tr>
<td> </td>
<?php foreach($items as $item): ?>
<td><?php echo $item->ItemID ?></td>
<?php endforeach; ?>
</tr>
</thead>
<?php foreach($skills as $skill): ?>
<tbody>
<tr>
<?php for($i=0; $i<count($items); $i ++){ ?>
<td><input type="text" value="" />
<input type="hidden" class="skillID" value="<?php echo $skill->Skill_ID" ?> />
</td>
<?php } ?>
</tr>
</tbody>
<?php endforeach; ?>
最佳答案
$('tbody tr td').click(function() {
var col = $(this).closest('td');
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);
}
});
});
table tr td {
border: 1px solid black;
}
input {
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<td></td>
<td>Item1</td>
<td>Item2</td>
<td>Item2</td>
</tr>
</thead>
<tbody>
<tr>
<td>Skill 1</td>
<td title="lvl2">
<input type="hidden" class="skillID" value="lvl2" />
<input type="text" value="" />
</td>
<td title="lvl1">
<input type="hidden" class="skillID" value="lvl1" />
<input type="text" value="" />
</td>
<td title="lvl3">
<input type="text" value="" />
<input type="hidden" class="skillID" value="lvl3" />
</td>
</tr>
<tr>
<td>Skill 2</td>
<td title="lvl3">
<input type="text" value="" />
<input type="hidden" class="skillID" value="lvl3" />
</td>
<td title="lvl2">
<input type="text" value="" />
<input type="hidden" class="skillID" value="lvl2" />
</td>
<td title="lvl1">
<input type="text" value="" />
<input type="hidden" class="skillID" value="lvl1" />
</td>
</tr>
</tbody>
</table>
希望这行得通。由于我没有制作Ajax的公开网址。该代码段将无法正常工作。
如果您需要不需点击即可达到此目的,则必须将脚本更改为doc ready方法,例如:
$(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);
}
});
});
});