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

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

您可以通过data属性指定personId：

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

然后，您可以像这样获取该personId：

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

Answer 3

在您的html文件中，将test（）更改为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);

     }
    }