Question

我有一个页面，显示有关视频统计信息的数据。所有数据都来自Mongodb，然后页面从模型中获取数据，然后使用Razor将其插入页面。我显示默认视图的前10名。

然后，我正在使用javascript执行搜索，因此用户可以输入两个参数来搜索视频。

我的主要问题是，生成具有默认结果的页面时显示的外观相同的表的最佳方法是什么？我试图用document.appendChild来做到这一点，但似乎没有用。

还有其他解决方法吗？

表格示例（实际上包含10个具有不同值的td）：

@for(int i = 0; i < 10; i++)
{
  <div class="main-table">
   <table id="@Model.Videos[i].VideoId" class="table" style="margin: 0 auto;">
     <tr>
       <td>Name</td>
       <td>@Model.Videos[i].Name</td>
     </tr>
  </div>
}

获取输入：

<h4 style="margin-bottom: 10px;">Search</h4>
<label>Variant "A" year: </label><br />
<input class="content" id="variantA" style="margin-bottom: 15px; border-radius: 5px" maxlength="4" /><br />
<label>Variant"B" year: </label><br />
<input class="content" id="variantE" style="margin-bottom: 10px; border-radius: 5px" maxlength="4" /><br />
<button class="btn btn-primary search" style="margin-bottom: 35px" onclick="searchy()">Search</button>

要搜索的字母：

    function searchy(variantA, variantE) {
        $(".main-table").hide();
        variantA = document.getElementById("variantA").value;
        variantE = document.getElementById("variantE").value;


        videos.forEach(function (video) {
            if (variantA == video.variantA.year && variantE == video.variantE.year) {
            var myTable = "<table class='table'><tr><td style='color: red;'>" + video.result   +   "</td></tr></table>";
            document.getElementsByClassName("result-table").inneHTML = myTable;
            } else {

            }
        });
        }

要获取视频：

        var videos = [];
        $.ajax({
            type: "GET",
            url: "@Model.ServiceApi/api/years",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
            videos = data;
            }
        });

我在HTML中也有一个空的div，其类为“ result-table”。

使用用户输入执行搜索，然后获取其值并将其与数据库中的视频对象进行比较。所有视频对象都在后台加载，并插入到数组中。

Answer 1

typo;
getElementsByClassName返回不具有innerHTML的集合
使用type="button"
您有jQuery，为什么不使用它？

$(function() { 
  $(".search").on("click",function(e) { 
    e.preventDefault(); 
    $(".main-table").empty().hide();
    var variantA = ("#variantA").val();
    var variantE = $("#variantE").val();
    $.each(videos,function (video) {
      if (variantA == video.variantA.year && variantE == video.variantE.year) {
        $(".main-table").append("<table class='table'><tr><td style='color: red;'>" + video.result   +   "</td></tr></table>");
      }
    });
    $(".main-table").show()
  });
});

生成带有搜索结果的表格的最佳方法

1 个答案: