jQuery 选择器：无法使用正确的选择器将数据放入正确的表格行和输入字段中

Question

在我的程序中有一个表格，用户可以在其中添加客户并获取有关他们的显示信息。对于此示例，该表由 3 行和一个输入字段组成。添加这些表行，工作。

在第一步中，他应该填写客户的姓名并从 jQuery UI 自动完成中获得建议。工作也很好。

现在的问题：填写姓名后，Ajax-Call 从控制器获取有关客户的数据，传递的数据是正确的。现在，该数据应显示在该客户的输入字段中，这就是问题开始的地方。我只能让它适用于直接跟随的下一个表行，所以在这种情况下，ID 被放在正确的输入字段中，但我不知道如何为地址输入字段或以后的更多输入字段执行此操作，并且表格行。

这是一个应该如何工作的示例：第一个客户是 John（ID：1，地址：Street 1），表格应该如下所示，并按以下方式工作：

客户：John（通过自动完成）

ID：1（来自 Ajax-Call 的数据并放入此输入字段）

地址：Street 1（来自 Ajax-Call 的数据并输入此输入字段）

这是我在视图中的 HTML 标记：

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @Html.ValidationSummary(true, "")

        <table id="customers">
            <tr>
                <td>Name of Customer:</td>
                <td><input type="text" class="customername" id="customername-0" name="customername[0]" placeholder=""></td>
            </tr>

            <tr>
                <td>ID of Customer:</td>
                <td><input type="text" class="customerid" id="customerid-0" name="customerid[0]" placeholder=""></td>
            </tr>

            <tr>
                <td>Adresss of Customer:</td>
                <td><input type="text" class="customeradress" id="customeradress-0" name="customeradress[0]" placeholder=""></td>
            </tr>
        </table>
        <button class="" type="button" id="add-customer" name="add-customer" onclick="add_customer()">Add another Customer</button>
    </div>
}

用于添加表格行的 JavaScript（我知道这不是最优雅的方式）：

<script>
    // An array to store the ids of the customers
    var customerIDArray = new Array();
    customerIDArray.push("");
    // An array to store the names of the customers
    var customerNameArray = new Array();
    customerNameArray.push("");

    // An array to store the adresses of the customers
    var customerAdressArray = new Array();
    customerAdressArray.push("");

    AutoCompleteCustomerName();
    AutoCompleteCustomerID();

    function add_customer() {
        refresh_customerNameArray();
        refresh_customerIDArray();
        customerNameArray.push("");
        customerIDArray.push("");

        refresh_table();
    }


    function refresh_customerNameArray() {
        for (i = 0; i < customerNameArray.length; ++i) {
            customerNameArray[i] = $("#customername-" + i).val();
        }
    }

    function refresh_customerIDArray() {
       for (i = 0; i < customerIDArray.length; ++i) {
            customerIDArray[i] = $("#customerid-" + i).val();
       }
    }

    function refresh_customerAdressArray() {
        for (i = 0; i < customerAdressArray.length; ++i) {
            customerIDArray[i] = $("#customeradress-" + i).val();
        }
    }

    function refresh_table() {
        var htmlMarkup = '<table id="customers">'

        if (customerNameArray.length == 1) {
            htmlMarkup += 
                '<tr>'+
                '<td>Name of Customer:</td>'+
                '<td><input type="text" class="customername" id="customername-0" name="customername[0]" placeholder="" value="' + customerNameArray[0] + '"></td>' +
                '</tr>'+

                '<tr>'+
                '<td>ID of Customer:</td>'+
                '<td><input type="text" class="customerid" id="customerid-0" name="customerid[0]" placeholder="" value="'+ customerIDArray[0] +'"></td>'+
                '</tr>'+

                '<tr>' +
                '<td>Adresss of Customer:</td>' +
                '<td><input type="text" class="customeradress" id="customeradress-0" name="customeradress[0]" placeholder=""></td>' +
                '</tr>'
        }

        else {
            for (var i = 0; i < customerNameArray.length; i++) {
                htmlMarkup +=
                '<tr>' +
                '<td>Name of Customer:</td>' +
                '<td><input type="text" class="customername" id="customername-' + i + '" name="customername['+ i +']" placeholder="" value="' + customerNameArray[i] + '"></td>' +
                '</tr>'+

                '<tr>' +
                '<td>ID of Customer:</td>' +
                '<td><input type="text" class="customerid" id="customerid-' + i +'" name="customerid['+ i +']" placeholder="" value="' + customerIDArray[i] + '"></td>' +
                '</tr>'+

                '<tr>'+
                '<td>Adresss of Customer:</td>'+
                '<td><input type="text" class="customeradress" id="customeradress-' + i + '" name="customeradress['+ i +']" placeholder=""></td>'+
                '</tr>'
            }
        }
        htmlMarkup +=
        '</table>'
        $("#customers").html(htmlMarkup);
        AutoCompleteCustomerName();
        AutoCompleteCustomerID();
    }
</script>

我的自动完成功能：

<script>
    function AutoCompleteCustomerName() {
        $(".customername").autocomplete({
            source: "/Home/AutoCompleteCustomerName",
            select: function(event, ui) {
            }
        });
    }
</script>

Ajax-Call 和下一个表格行的当前解决方案：

<script>
    function AutoCompleteCustomerID()
    {
        $('.customername').on('focusout', function () {
            var $id = $(this).closest("tr").next().find(".customerid");
            var self = $(this);
            $.ajax({
                type: "GET",
                url: "/Home/AutoCompleteCustomerID",
                data: { name: $(self).closest("tr").find(".customername").val()},
                contentType: "application/json",
                dataType: "json",
                success: function (result) {
                    $id.val(result.id);
                }
            })
        });
    }
</script>

如果你能给我一个建议或提示如何解决这个问题，我将不胜感激，我对 JavaScript 和 jQuery 还很陌生，仍然需要学习很多东西。

Answer 1

我不确定这是你需要的，你可以试试这个

  var $street = $($id).closest("tr").next().find(".customeradress");

以此类推，其他字段进入下一行。

NB 我想当你调用自动完成时，相关的表格行已经在页面中，看起来是这样的。

所以你的自动完成功能可能会变成

<script>
    function AutoCompleteCustomerID()
    {
        $('.customername').on('focusout', function () {
            var $id = $(this).closest("tr").next().find(".customerid");
            var $street = $($id).closest("tr").next().find(".customeradress");
            var self = $(this);
            $.ajax({
                type: "GET",
                url: "/Home/AutoCompleteCustomerID",
                data: { name: $(self).closest("tr").find(".customername").val()},
                contentType: "application/json",
                dataType: "json",
                success: function (result) {
                    $id.val(result.id);
                    $street.val(result.street);
                }
            })
        });
    }
</script>

另一种方法是使用数据属性和 id 取决于它们，但这可能会改变你的脚本。