Javascript 如何通过AJAX调用更新HTML表？

伙计们，我的ASP.NETMVC

home

视图中有一个html表。现在，表格最初是通过模型中的数据填充的。现在，单击主页上的某些按钮后，我想更新表中的数据，即清除表中的数据，并使用来自ajax调用的数据进行更新

这是我在视图中的表格：

<article class="scrlable">
<table>
    <tr>
        <td>#</td>
        <td>Name</td>
        <td>Status</td>
        <td>Since</td>
    </tr>

    @{   
    int srno = 1;
    foreach (var pendingResponseModel in Model.hrPendingResponseList)
    {
    <tr>
        <td>@srno</td>
        <td>@pendingResponseModel.CandidateName</td>
         <td>@pendingResponseModel.CandidateLifeCycleStatusName</td>
          @if (pendingResponseModel.DayDifference == "1")
                {
          <td>@(pendingResponseModel.DayDifference) day</td>
                    }
                    else
                    {
                        <td>@(pendingResponseModel.DayDifference) days</td>
                    }
                </tr>
                    srno++;
                }
            }
        </table>
    </article>

ajax调用返回的数据是JSON格式的。它具有名称、状态和自元素。可以通过使用

value.CandidateName

，

value.Status

等查看它们

现在我想用通过AJAX调用得到的值更新上表的值。我该怎么做呢？有可能替换整篇文章吗

---

注意：我通过ajax调用获得了多个值，因此我在函数上设置了一个循环。

您可以使用jQuery append

success: function (data) {
    $.each(data.data, function (index, value) {
        $("table").html("Your HTML to updated");
    });
},

success: function (data) {
    $("table").html(data);
},

---

让控制器方法返回包含表或项目的分部

[HttpPost]
public virtual ActionResult GetTable(ArticleViewModel viewModel)
{
    // do stuff
    return PartialView("_ArticleTable", viewModel);
}

然后在jQuery中更新表或项目：

您可以使用jqueryappend

success: function (data) {
    $.each(data.data, function (index, value) {
        $("table").html("Your HTML to updated");
    });
},

success: function (data) {
    $("table").html(data);
},

---

我已通过以下代码解决了我的问题

function GetStatusWise(control, departCode) {
    $.ajax(
        {
            type: "GET",
            url: WebApiURL + ".....URL...." + departCode,
            dataType: "json",
            crossDomain: true,
            async: true,
            cache: false,
            success: function (data) {
                var srno = 1;
                $('#tblPendingHrResponse').find($('.trTblPendingHrResponse')).remove();

                $.each(data.data, function (index, value) {
                    random(value, srno);
                    srno++;
                });
            },
            error: function (x, e) {
                alert('There seems to be some problem while fetching records!');
            }

        }
    );
}

函数随机（值，srno）{
var daydifference=values.daydifference==1？''+values.daydifference+'day'：''+values.daydifference+'days'；
var tr=''+
“+srno+”+
''+values.CandidateName+''值+
''+values.CandidateLifeCycleStatusName+''的值+
日差+''+srno++；
$（'tblPendingHrResponse'）。追加（tr）；
}

追加只会将数据添加到以前的数据中……不是吗？@NewbieProgrammer UpdatedWhy-1。请注意解释。可能是当您将鼠标悬停在downvote按钮上时列出的原因您已经完成了大部分艰苦的工作，现在需要做的就是从响应中提取表并插入它。因为我们不知道答案是什么，所以我们无法真正提出有效的解决方案。我们所能做的就是把你推向正确的方向（这不是很好的答案）。我复制了user3719477的示例。