javascript - 使用 jQuery 将数据库中的值显示到表中动态创建的文本字段

Question

我将使用 JQuery 将数据库中的值显示到动态创建的文本字段到每个表格单元格。 (请注意，我要显示的获取值并不完全相同。)“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);
     }
  });
});

上面的代码在警报和单击功能中成功，但我需要通过单击“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; ?>

Answer 1

$('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。该代码片段不起作用。

如果您需要在不点击的情况下实现此目的，那么您必须将脚本更改为文档就绪方法，例如:

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