javascript - jQuery 选择器 : Trouble with using the right Selectors to put in data in the right table row and input field

Question

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

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

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

以下是其工作方式的示例:第一个客户是 John(ID:1，地址:Street 1)，表格应如下所示并按以下方式工作:

客户:John(通过自动完成)

ID:1(来自 Ajax 调用的数据并放入此输入字段中)

地址:Street 1(来自 Ajax-Call 的数据并放入此输入字段中)

这是我在 View 中的 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 调用和下一个表行的当前解决方案:

<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 进行操作，但这可能会极大地改变您的脚本。