Как получить значение из таблицы foreach td с помощью Jquery

Question

У меня есть таблица, построенная через создание представления из контроллера MVC. Выплевывает кучу строк.

У меня есть вызов ajax, который передает данные в контроллер для ввода данных. Мне нужен первый тд выбранного столбца.

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

Мне нужно только одно значение (Id) этой конкретной строки.

Вот таблица.

<table class="table  table-striped table-hover  col-xl-12" id="policyTable">
<tr class="thead-dark">
    <th class="toggleMe1">
        UnderWriter
    </th>
    <th class="toggleMe2">
        @Html.DisplayNameFor(model => model.Client)
    </th>

    <th>
        Exp-Policies
    </th>

    <th>
        Exp-Date
    </th>
</tr>

@foreach (var item in Model)
{
    <tr id="id_@item.Id">

        <td class="hideMe">
            @Html.DisplayFor(modelItem => item.Id)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.NewUw)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Client)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Expiring_Policies)
        </td>

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

        <td style="width: 25%; height: 120px;">
            <div class="form-group">
                @* @Html.LabelFor(model => model.Notes, htmlAttributes: new { @class = "control-label col-md-2" })*@
                <div class="col-md-12">
                    @Html.TextAreaFor(modelItem => item.Notes, new { @class = "form-control textAreaCS", @rows = 8 })
                    @Html.ValidationMessageFor(modelItem => item.Notes, "", new { @class = "text-danger" })
                </div>
            </div>
            <div class="col-12 ml-3">
                <div class="row">
                   @* <input type="submit" value="Save" id="notes" class="btn btn-outline-primary btn-sm col-2" style="font-size: 16px" />*@

                    <div class="col-12">
                        @if (TempData["SM"] != null)
                        {
                            <div class="alert alert-success text-center text-capitalize" style="font-size: 16px;">
                                @TempData["SM"]
                            </div>
                        }
                    </div>
                </div>

            </div>
        </td>
        <td>
            <button type="button" class="btn btn-info btn-sm">
                @Html.ActionLink("Review", "EditPolicy", new { id = item.Id }, new { @class = "review" })
            </button>
           <br/>
            <button type="button" class="btn btn-primary mt-5" data-toggle="modal" data-target="#ColumnModal">
                Notes
            </button>
        </td>
    </tr>
}

</table>

Вот Jquery, который я использую, чтобы получить нужные мне значения

 $('#ColumnModal').on('show.bs.modal', function () {

                //find the correct Id associated with the row. 
                var id = $('td:first-child').text();
                var policyNotes = $("#textForNotes").focus();
                //var id = $('td:first-child').text();
                var comment = $.trim($("modal#textForNotes").val());
                $('#submit').on('click', function () {

                    var data = JSON.stringify({ 'Id': id, 'polNotes': $('#textForNotes').val() });
                    console.log(id + $('#textForNotes').val()); 



                   /* Commented out for simplicity 
                      $.ajax({
                        url: '/Policy/CompletedNotes',
                        type: 'POST',
                        contentType: 'application/json',
                        data: data,
                        success: function () {
                            //alert('success');
                            console.log('success');
                        },
                        error: function () {
                            //alert('Error');
                            console.log('Error');
                        }
                    })
                    */
                   // location.reload();

                });


            })

У меня есть модал, который подходит и фиксирует Id и некоторый текст. Он захватывает один ряд сам по себе просто отлично. С несколькими рядами это не так. Как изолировать захват значения для этой конкретной строки сначала TD?

РЕДАКТИРОВАТЬ:

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

var id = $('#policyTable tr').find(' td:first-child').text();

ДОПОЛНИТЕЛЬНОЕ СОДЕРЖАНИЕ ОТ БРАУЗЕРА К ВЫХОДУ:

В настоящее время у меня есть три строки, которые отображаются в таблице. Таким образом, он захватывает все три идентификатора и выводит их на консоль

CompletedPolicies:488 
            359 //row 1

            471 // row 2 .. I clicked on this one

            474 // row 3
        This is just a test

У меня есть дополнительный тест, который я выполнил, но он фиксирует все в строках. Не очень полезно

Answer 1

Итак, я не смог найти разумного решения, которое бы я делал, как я делал выше.По какой-то причине я попробовал что-то из предыдущего проекта.Я знал, что если бы я мог выделить только то значение, которое хотел, я бы смог сделать все, что мне было нужно.Таким образом, вместо использования кнопки для вызова модального режима, а затем для захвата неизвестного идентификатора строки (который, как мне кажется, и есть происходящее. Он не знал, какое значение нужно специально захватить). Я делаю строку щелкающей.И вместо этого назовите модальный по этому клику.Оттуда я могу выделить нужные мне значения.Я делаю внутри foreach класс "clickable-row".Вот вызов Jquery, который я делаю после нажатия.Который захватывает все, что мне нужно.

 $('#policyTable').on('click', '.clickable-row', function (event) {

           //Capture the row Id 
            var id = $(this).closest('tr').children('td:first').text();

            //Listen for modal button to be clicked
            $('#ColumnModal').on('show.bs.modal', function () {

                var policyNotes = $("#textForNotes").focus();

                var comment = $.trim($("modal#textForNotes").val());

                //Listen for submit button. Then send AJAX .post call to controller
                $('#submit').on('click', function () {

                    var data = JSON.stringify({ 'Id': id, 'polNotes': $('#textForNotes').val() });
                    console.log(id + $('#textForNotes').val());
                     $.ajax({
                         url: '/Policy/CompletedNotes',
                         type: 'POST',
                         contentType: 'application/json',
                         data: data,
                         success: function () {
                             //alert('success');
                             console.log('success');
                         },
                         error: function () {
                             //alert('Error');
                             console.log('Error');
                         }
                     })
                     location.reload();

                });


            })



            /*  $.get(url, Id, function (data) {
                  $(".content").html(data);
                  alert("your id is " + data);
              })*/
        })  

Answer 2

Попробуйте это:

var id = $('#policyTable tr').children('td')[0].text();

Я думаю, что это работа.