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

上面的代码在alert和click func中成功，但是我需要通过单击“td”在textfield中显示数据，或者当页面加载时，值会自动显示。

视图，

<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

＆＃13;

000111101100110101  [0]3-4-1-2-2-2-1-1-1-1      
000011010000001010  [0]4-2-1-1-6-1-1-1-1
000000100000000101  [0]6-1-8-1-1-1
000000000000000010  [0]16-1-1
000000000000000001  [0]17-1
000000000000000000  [0]18

＆＃13;

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

＆＃13;

table tr td {
  border: 1px solid black;
}

input {
  width: 50px;
}

＆＃13;

希望这有效。因为我没有你的公共网址来制作ajax。该片段不起作用。

如果您需要通过单击来实现此目的，则必须将脚本更改为doc ready方法，如：

＆＃13;

<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>

＆＃13;

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

1 个答案: