データベースからの値を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); 
    } 
    }); 
}); 

上記のコードは、アラートに成功したと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; ?> 

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を作るためのあなたのパブリックURLを持っていないので。スニペットはうまくいかない。 - あなたもない

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