Question

当我尝试检索某个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的文本框中。请帮忙。非常感谢你。

Answer 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');"/>

如果你什么都不懂，请告诉我。

Answer 2

您可以通过以下数据属性为personId提供：

<td><input type="text" name="personId" data-personId = "1" class="personId" size="30" onchange="test()"/></td>

之后你就可以得到那个人了：

$('.personId').attr('data-personId');

Answer 3

在你的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);

     }
    }

如何分隔每个文本框的每个值

3 个答案: