データベースから従業員IDを取得して表示します。をクリックしたら、テーブルにドロップダウン値を動的に入力する必要がありますが、ドロップダウンに値addRow()が表示されません。エラーは何ですか？これを完了するのを手伝ってください。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onClick="addRow()">Add Row</button>
<table id="dataTable"></table>
function addRow() {
var option = '';
var data = <?php echo json_encode($employee);?>;
$.each(data, function(i, item) {
option += '<option value="' + item.id + '">' + item.id + '</option>';
});
$('#emp_id').append(option);
$("#dataTable").append('<tr><td><select name="emp_id" id="emp_id"></select</td></tr>');
}
この問題は、DOMでまだ作成していない要素にoption要素を追加しようとしているためですselect。これを修正するには、select最初に作成してoptionから、要素を追加します。
また、重複を避けるために、ではなく、をclass新しいに割り当てる方がよいことに注意してください。次のように使用して、要素をより簡潔に作成するロジックを作成することもできます。selectidoptionmap()
function addRow() {
var data = [{ id: 'foo' }, { id: 'bar' }]; // <?php echo json_encode($employee);?>;
var options = data.map(function(el) {
return `<option value="${el.id}">${el.id}</option>`;
});
var $tr = $('<tr><td></td></tr>').appendTo('#dataTable');
$('<select name="emp_id" class="emp_id" />').html(options).appendTo($tr.find('td'));
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" onClick="addRow()">Add Row</button>
<table id="dataTable"></table>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加