jQuery 选择器：使用正确的选择器将数据放入右侧 table 行和输入字段时出现问题

Question

在我的程序中有一个 table，用户可以在其中添加客户并显示有关他们的信息。对于此示例，table 由 3 行和一个输入字段组成。添加那些 table 行，有效。

第一步，他应该填写客户的姓名，然后从 jQuery UI 自动完成中获取建议。也很好用。

现在的问题是：填写姓名后，Ajax-Call 从控制器获取有关客户的数据，交付的数据是正确的。现在该数据应该显示在该客户的输入字段中，这就是问题开始的地方。我只能让它对紧随其后的下一个 table 行起作用，所以在这种情况下，ID 被放在正确的输入字段中，但我不知道如何为地址输入字段或什至以后做更多输入字段和 table 行。

这是它应该如何工作的示例：第一个客户是约翰（ID：1，地址：街道 1）table 应该如下所示并按以下方式工作：

客户：约翰（通过自动完成）

ID: 1（数据来自Ajax-调用并输入此输入字段）

地址：街道 1（来自 Ajax 的数据-调用并在此输入字段中输入）

这是我的 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 用于添加 table 行（我知道这不是最优雅的方式）：

<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>

下 table 行的 Ajax-调用和当前解决方案：

<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");

以此类推下一行中的其他字段。

注意我想当您调用自动完成时相关的 table 行已经在页面中，看起来是这样。

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

<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，但这可能会改变您的脚本很多。

jQuery 选择器：使用正确的选择器将数据放入右侧 table 行和输入字段时出现问题

jQuery selectors: Trouble with using the right Selectors to put in data in the right table row and input field

javascript

jquery

jquery-selectors