Question

我有一个通过从MVC控制器制作视图而构建的表。吐出一排排。

我有一个ajax调用，该调用将数据提交到控制器以进行数据输入。我需要所选列的第一个td。

当只有一行存在时，我能够完成此操作，但是当我添加第二行时，调用会从上面的行和选定的行中提取值。

我只想要该特定行的一个值（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和一些文本。它本身就可以捕获一行。对于多行则没有。我如何首先将值捕获隔离到特定行？

编辑：

我尝试了多个Jquery查找来完成此任务。一切都返回上面的值。这是一个..及其许多变体。

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

浏览器到显示输出的附加内容：

我目前在表格中显示三行。因此，它将捕获所有三个ID并将其打印到控制台中

CompletedPolicies:488 
            359 //row 1

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

            474 // row 3
        This is just a test

我还有一个额外的测试，但它捕获了行中的所有内容。真的没用

Answer 1

尝试一下：

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

我认为这是可行的。

Answer 2

因此，我无法像上面那样获得合理的解决方案。一时兴起，我尝试了上一个项目中的一些东西。我知道，如果我仅能隔离自己想要的价值，那么我将能够做我需要的其他一切。因此，不要使用按钮来调用模式，而是捕获未知的行ID（我认为这是发生了什么。它不知道具体捕获哪个值。）我使行本身可单击。并在该点击时调用模式。从那里我可以隔离我需要的值。我在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);
              })*/
        })

如何使用jQuery从foreach表TD获取值

2 个答案: