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

问题描述：

我将使用JQuery将数据库中的值显示到动态创建的文本字段到每个表格单元格。（请注意，我要显示的提取值并不完全相同。）'lvl'（例如lvl1或lvl2）是数据库中的值，而不是id或文本字段类。

I going to display the value from the database to the dynamically created textfields to each table cell using JQuery. (Note that the fetch values Im going to display are not all same.) The 'lvl' (e.g. lvl1 or lvl2) are the values from database, not an id or class of textfields.

这就是它的样子..

      | 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中成功，但我需要在textfield中显示数据单击td或加载页面时，该值将自动显示。

The above code was successful in alert and click func, but I need to display the data in textfield by clicking the "td" or when the page was loaded, the value would display automatically.

查看，

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

Hope this works. Since I don't have your public url for making ajax. The snippet wont work.

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

If you need to attain this with out clicking, then you have to change your script to doc ready method like:

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

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

相关推荐