Как выбрать первую строку из таблицы после изменения с помощью JQuery?

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() функция) является асинхронной, и ваша строка кода $('#SPartial').find('#tbl tbody tr:first').addClass('select'); выполняется до того, как частичное представление возвращается и загружается в DOM.

Вам необходимо выполнить эту строкукод в успешном обратном вызове

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');
    });
});