MVC视图查找匹配行在表中使用javascript

mvc view find matching row in table using javascript

本文关键字:javascript 视图 查找 MVC      更新时间:2023-09-26

嗨,我正在使用ajax调用更新我的行,现在我想用更新的数据更新我的行,而不刷新页面,现在我正在匹配DisplayName,但我想将它与ID匹配,因为ID是唯一的,我的ID包含在一个表内的隐藏字段中。如何匹配它

ajax调用和javascript

 <script type="text/javascript">
   function SuspendSharing(selectedContact)
{
    var url="@Url.Action("SuspendedSharing", "Sharing")";
    var data= { Id: selectedContact };
    var type="GET";
    CallGet(url, data, type, function (data) { onSuccess(data, selectedContact); });
}
function onSuccess(data, selectedContact) {
    data = JSON.parse(data);
    $("#message_toast").hide();
    var path="@Url.Content("~/Content/MessasgeTemplate.html")";
    $("#message_toast").load(path);
    $("#SuccessMessage").text();
    $("#message_toast").fadeIn("slow", function () { $(this).fadeOut(3000, function () { $(this).children().remove(); }); });
    var contactSelector = "td:contains('"+selectedContact+"')";
    $contactRow = $(contactSelector).closest("tr");
    $contactRow.find("td:nth-child(5)").text("test");
}
function CallGet(url, data, type, onSuccess)
{
    $.ajax({
        type: type,
        url: url,
        data: data,
        dataType: "json",
        success: function (resultdata) {
            onSuccess(resultdata);
        }
    });
}
</script>
视图

 <table class="table table-striped m-b-none" id="sharingTable">
            <thead>
                <tr>
                    <th class="bg bg-blue">
                        Name
                    </th>
                    <th class="bg bg-blue">
                        Shared Details
                    </th>
                    <th class="bg bg-blue">
                        Last Used
                    </th>
                    <th class="bg bg-blue">
                        Status
                    </th>
                    <th class="bg bg-blue">
                        Action
                    </th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in sharing)
                {
                    <tr>
                        <td>
                            <input type="hidden" value="@item.ID"/>
                            @item.Prefix @item.DisplayName
                        </td>
                        <td>
                            @{
                                foreach (var report in item.SharedReports)
                                {
                                    <img src="@Url.Content(string.Format("Content/images/sharingReport/{0}.png", report))">
                                }
                            }
                        </td>
                        <td>
                            @item.LastUsed
                        </td>
                        <td>
                            @{ var staus = (ContactStatusTypes) item.Status; }
                            @staus
                        </td>
                        <td width="160">
                            <a class="inline m-sm pointer editSharing" href="@Url.Action("SharingReportDetailsByContactID", "Sharing", new {Id = item.ID})" data-toggle="ajaxModal" name="@item.ID" alt="@prefix @item.DisplayName" title="Edit Sharing"><i class="fa fa-edit  "></i>
                            </a>
                            <a class="inline m-sm pointer deleteSharing" name="@item.ID" title="Delete Sharing"><i class="fa fa-times "></i>
                            </a>
                            <a class="inline m-sm pointer" href="#" onclick=" SuspendSharing('@item.ID') " title="Suspend Sharing"><i class="fa fa-pause "></i>
                            </a>
                        </td>
                    </tr>
                }
            </tbody>
        </table>

在上面的代码中如果我使用@item。ID在不同的td它匹配的值,但如何匹配隐藏字段值。比如

  var contactSelector = "td(input):contains('"+selectedContact+"')";
    $contactRow = $(contactSelector).closest("tr");//will give me row which I have updated
    $contactRow.find("td:nth-child(5)").text(data);

假设您有以下html

<tr class='item'>
 <td class='itemId'>@item.ID</td>
 <input type="hidden" value="@item.ID" class='hiddenid'/>
 //other  html
</tr>

如果您试图通过单击它来检索行id,请使用以下命令:

$('tr').on('click', function() {
    var id = $(this).find('.hiddenid').val();
    var parent = null;
    $('.itemId').each(function() {
     if ($(this).text() == id) {
      parent = $(this).parent(); // this is the matching <tr>
     }
    });
}

,但我不明白为什么你有一个隐藏的输入和一个td与id?你可以从这两个中选取一个,不需要两次

我认为你需要重写你的问题,你不需要获取隐藏的输入值,然后使用它来获取td