Question

我想使用JQuery在更改后从表中选择第一行。 ABC是下拉列表，当用户更改下拉列表时，它会在表格中加载另一组数据。

JQuery的

  $('#ABC').change(function () {
        let data = {
             abc: $('#ABC').val()                
         }
      var url = '@Url.Action("Partial", "S")'
        $('#SPartial').load(url, data)
$('#SPartial').find('#tbl tbody tr:first').addClass('select');
    });

父视图

<div id="SPartial">                  
  @Html.RenderPartial("_Partial", Model);                
 </div>

部分视图

<table class="table", id="tbl">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(m => m.D)</th>
            <th>@Html.DisplayNameFor(m => m.R)</th>
            <th></th>         
        </tr>
    </thead>

    @foreach (var item in Model)
    {
        <tbody>
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.D)

                </td>

                <td>
                    @Html.DisplayFor(modelItem => item.R)                 
                </td>

            </tr>
        </tbody>

     }
</table>

Answer 1

Ajax（您的.load()函数）是异步的，并且在返回部分视图并将其加载到DOM之前，您的$('#SPartial').find('#tbl tbody tr:first').addClass('select');代码行正在执行。

您需要在成功回调中执行该行代码

var partial = $('#SPartial'); // cache it
$('#ABC').change(function () {
    let data = { abc: $('#ABC').val() };
    var url = '@Url.Action("Partial", "S")'
    partial.load(url, data, function(response) {
        partial.find('#tbl tbody tr:first').addClass('select');
    });
});

如何使用JQuery在更改后从表中选择第一行？

1 个答案: