在我的應用程序中，我試圖data從MYSQL數據庫中獲取數據并設置text_name為amount text boxes動態創建的文本框。當我第一次動態創建時，text box它data根據 檢索數據Test_ID (test_id text box)是正確的工作，但是在下一個動態創建中text box，只是它不顯示data根據Test_ID，但在控制臺中它根據之前添加的檢索數據Test_ID，不目前已添加fetchdata這是HTML代碼<table class="table table-hover table-white"> <thead> <tr> <th class="col-sm-1">Test ID</th> <th class="col-md-6">Test Name</th> <th style="width:100px;">Amount</th> <th> Action</th> </tr> </thead> <tbody id="rows"> <tr> <td> <input class="form-control" type="text" style="width:200px" id="test_id[]" onblur="checkname();" onkeyup="checkname();" onchange="checkname();"> </td> <td> <input type="text" style="width:300px" class="form-control" readonly="" id="test_name" onblur="checkname();" onkeyup="checkname();" onchange="checkname();"> </td> <td> <input type="text" style="min-width:100px" class="form-control" readonly="" id="amount"> </td> <td><center> <a href="javascript:void(0)" class="text-success font-18" title="Add" id="add"><i class="fa fa-plus"></i></a> </center> </td> </tr> </tbody></table>這是Ajax代碼 $(document).ready(function(){ var count=0; $(document).on('click','#add',function() { count++; var html= ''; html += '<tr id="trrows">'; 如果有人能幫助我，我真的很感激。謝謝。
1 回答
青春有我
TA貢獻1784條經驗 獲得超8個贊
發生這種情況是因為您正在獲取元素的值，使用id該值將為您提供具有相同 id 的第一個輸入值。相反，在函數內附加新的傳遞值時this，該函數將引用已更改的當前元素。
因此，更改您的jquery代碼，如下所示：
$(document).on('click','#add',function() {
//other codes
//add this inside function
html += '<td id="testid"> <input id="test_id[]" class="form-control" type="text" style="width:200px" onchange="checkname(this);"> </td>';
//add class
html += '<td id="testname"> <input id="test_name" class="test_name" type="text" style="width:300px" class="form-control " readonly="" onblur="checkname();" onkeyup="checkname();" onchange="checkname();"> </td>';
// other code
});
function checkname(el)
{
var test_id = $(el).val();//get that value
$.ajax({
type: 'post',
url: "adminquery/fetch_test_name.php", // request file the 'check_email.php'
data: {'test_id': test_id,},
success: function (data) {
//get closest tr and find class with .test_name
$(el).closest('tr').find('.test_name').val(data);
}
});
//same do for other
}
演示代碼：
$(document).ready(function() {
var count = 0;
$(document).on('click', '#add', function() {
count++;
var html = '';
html += '<tr id="trrows">';
html += '<td id="testid"> <input id="test_id[]" class="form-control" type="text" style="width:200px" onchange="checkname(this);"> </td>';
html += '<td id="testname"> <input id="test_name" type="text" style="width:300px" class="form-control test_name" readonly="" onblur="checkname();" onkeyup="checkname();" onchange="checkname();"> </td>';
html += '<td id="amounts"> <input id="amount" type="text" style="min-width:150px" class="form-control" readonly="" > </td>';
html += '<td><center> <a href="javascript:void(0)" class="text-danger font-18 remove" title="Remove" id="remove"><i class="fa fa-trash-o">-</i></a></center> </td>';
html += '</tr>';
$('#rows').append(html);
});
$(document).on('click', '.remove', function() {
$(this).closest("#trrows").remove();
});
});
// fetch test name from database
function checkname(el) {
var test_id = $(el).val();
console.log(test_id)
$.ajax({
type: 'post',
url: "adminquery/fetch_test_name.php",
data: {
'test_id': test_id,
},
success: function(data) {
//get closest tr and find test_name class
$(el).closest('tr').find('.test_name').val(data);
}
});
//do same for othere input..
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover table-white">
<thead>
<tr>
<th class="col-sm-1">Test ID</th>
<th class="col-md-6">Test Name</th>
<th style="width:100px;">Amount</th>
<th> Action</th>
</tr>
</thead>
<tbody id="rows">
<tr>
<td> <input class="form-control" type="text" style="width:200px" id="test_id[]" onchange="checkname(this);">
</td>
<!--add class here-->
<td> <input type="text" style="width:300px" class="form-control" class="test_name" readonly="" id="test_name" onblur="checkname();" onkeyup="checkname();" onchange="checkname();">
</td>
<td> <input type="text" style="min-width:100px" class="form-control" readonly="" id="amount">
</td>
<td>
<center> <a href="javascript:void(0)" class="text-success font-18" title="Add" id="add"><i class="fa fa-plus">+</i></a> </center>
</td>
</tr>
</tbody>
</table>
- 1 回答
- 0 關注
- 152 瀏覽
添加回答
舉報
0/150
提交
取消