Таргетинг на конкретный тд в таблице forec MVC Razor с использованием Jquery

Question

У меня есть таблица, которая отображает разные вещи для пользователей. Последний тд в каждом ряду содержит Html.ActionLink и скрытый загрузчик ajax. Когда кнопка выбора нажата, я хочу, чтобы отображался только этот gif загрузчик строк. Я могу довольно легко показать каждый из них, когда нажата кнопка select, но я изо всех сил пытаюсь изолировать отдельный td и показать только этот ОДИН загрузчик. Вот код таблицы:

<table class="table" id="tblCifSelection">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.ClientName)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.PolicyNumber)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.PolicyTypeDescription)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.EffDate)
    </th>
    <th>
        @Html.DisplayNameFor(model => model.ExpDate)
    </th>

    <th></th>
</tr>

@foreach (var item in Model)
{
    <tr>
        <td>
            @Html.DisplayFor(model => item.ClientName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.PolicyNumber)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.PolicyTypeDescription)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.EffDate)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ExpDate)
        </td>

        <td>
            @Html.ActionLink("Select", "CompleteCIF", new { UniqPolicy = item.UniqPolicy }, new { onclick = "loadFunction();"}) |
            @* @Html.ActionLink("Delete", "Delete", new { id=item.UniqPolicy })*@
            <img id="cifLoader" class="ml-2 loader" src="~/Images/ajax-loader (3).gif" />

        </td>
    </tr>
}

Вот скрипт, с которым я работаю.

 <script>
   $(document).ready(function () {
       $('.loader').hide();
   })

   function loadFunction() {
       $(this).closest('.loader').show();

       /* These are tests I ran to see what would work and what wouldn't */
       //$('tr').closest('td').attr(' .loader').show();
       //$('.loader').show(); //this shows all loaders. Only one that works.
       $('#tblCifSelection').closest('tr').children('td:nth-child(6) img#cifLoader').show();
       $(this).closest('tr').children('td:nth-child(6)').show();
   }
</script>  

Заранее спасибо за помощь.

Answer 1

Благодаря помощи двух выше. Я смог выработать решение, которое работает. Данные таблицы такие же, но я изменил небольшой кусочек ..

 <td>
   @Html.ActionLink("Select", "CompleteCIF", new { UniqPolicy = item.UniqPolicy }, new { @onclick = "loaderFunction(this);"}) |
   <img id="cifLoader" class="ml-2 loader" src="~/Images/ajax-loader (3).gif" />        
 </td>

   function loaderFunction(t) {
       $(t).closest('tr').find('td .loader').show();
       //$('.loader').show(); //this shows all loaders
   }

Это работает отлично. Показывает загрузчик на том, что нажата выбранная кнопка.