Display the value from database to dynamically created textfield in the table using jQuery

Question

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.

Here's what it looks like..

      | itm1 | itm2 | itm3 | itm4 | itm5
------|------|------|------|------|-----
skill1| lvl2 | lvl3 | lvl1 | lvl4 | lvl0
------|------|------|------|------|-----
skill2| lvl1 | lvl0 | lvl4 | lvl2 | lvl1
------|------|------|------|------|-----
skill3| lvl4 | lvl2 | lvl3 | lvl0 | lvl1

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

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.

view,

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

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

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