我将使用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>&nbsp;</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);
      }
    });
  });
});

09-10 10:21
查看更多