当我尝试检索某个ID的数据时,它会将其数据填充到所有存在的文本框中。
这是我的addrow脚本,它添加了一行新的文本框:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[1].cells[i].innerHTML;
}
}
这是我的html文件
<td><input type="text" name="personId" class="personId" size="30" onchange="test()"/></td>
<td><input type="text" name="personName" class="personName" size="30" disabled/></td>
以下是将该数据附加到文本框的测试脚本:
function test(){
var $cell = $('.personId');
var cellData = $cell.html();
$cell.data('value', cellData);
//Code here to pass the personId in to an ajax and return it's corresponding personName
success: function(data) {
$('.personName').val(data.person);
}
}
当我有3行personId和personName并且我输入一个personId时,3行中的所有文本框都返回personName。目标是当我在一行中输入personId时,pesonName应仅反映在当前进入personId的文本框中。请帮忙。非常感谢你。
答案 0 :(得分:1)
按照评论来理解代码。
var personVal =1; //personVal to create dynamic id
$(document).on('keyup','.personId', function() {
var personId = $(this).val();
//Code here to pass the personId to an ajax and return it's corresponding personName
//ajax success code here
//and success code like
// success: function(data) {
var currentPersonVal=this.id.split('-')[1];
var personName="#personName-"+currentPersonVal;
$(personName).val(currentPersonVal);//name hardcoded for your understanding, you need to add 'data.person'
//}
});
function addRow(tableID) {
var table = document.getElementById(tableID);
personVal =personVal+1 //increase personVal by 1
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
//generate textbox here with dynamic id by adding personVal at the end of id and '-'(dash) is used to split id later
var newcell = row.insertCell(0);
newcell.innerHTML = "<input type='text' id='personId-"+personVal+"' class='personId' size='30' />";
var newcell = row.insertCell(1);
newcell.innerHTML = "<input type='text' id='personName-"+personVal+"' class='personName' size='30' disabled/>";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table align="center" width="100%" id="table1Id" class = "centerAlign">
<td><input type="text" id="personId-1" class="personId" size="30" /></td>
<td><input type="text" id="personName-1" class="personName" size="30" disabled/></td>
</table>
<input type="button" value="Add Row" onclick="addRow('table1Id');"/>
如果你什么都不懂,请告诉我。
答案 1 :(得分:0)
您可以通过以下数据属性为personId提供:
<td><input type="text" name="personId" data-personId = "1" class="personId" size="30" onchange="test()"/></td>
之后你就可以得到那个人了:
$('.personId').attr('data-personId');
答案 2 :(得分:0)
在你的html文件中更改test()以测试(this):
<td><input type="text" name="personId" data-personId = "1" class="personId" size="30" onchange="test()"/></td>
&安培;将测试功能更改为:
function test(e){
// remove this
// var $cell = $('.personId');
var cellData = $(e).html();
$(e).data('value', cellData);
//Code here to pass the personId in to an ajax and return it's corresponding personName
success: function(data) {
$(e).closest('.personName').val(data.person);
}
}