在我的应用程序中，我试图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 关注
- 34 浏览
添加回答
举报
0/150
提交
取消