Отображение значения из базы данных в динамически созданное текстовое поле в таблице с помощью jQuery

Я собираюсь отображать значение из базы данных в динамически создаваемые текстовые поля в каждую ячейку таблицы с помощью JQuery. (Обратите внимание, что значения выборки Im, отображаемые на дисплее, не одинаковы.) «Lvl» (например, lvl1 или lvl2) – это значения из базы данных, а не идентификатор или класс текстовых полей.

Вот как это выглядит.

• Значение Javascript для PHP с помощью JQuery
• Измените содержимое DIV с помощью ajax, php и jQuery
• Веб-приложение - слайдер, показывающий функции дней месяца
• Список транзакций PayPal
• JQuery Ajaxing в Processmaker

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