Лучший способ создать таблицу с результатами поиска

Question

У меня есть страница, которая показывает данные о статистике видео. Все данные поступают из Mongodb, а затем страница получает их из модели, а затем вставляет их на страницу с помощью Razor. Я отображаю топ-10 для просмотра по умолчанию.

Затем я выполняю поиск по JavaScript, чтобы пользователь мог ввести два параметра для поиска видео.

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

Есть еще идеи, как решить эту проблему?

Пример таблицы (на самом деле содержит 10 тд с разными значениями):

@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>

Js к поиску:

    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;
            }
        });

У меня есть пустой div с class = "result-table" также в HTML.

Поиск выполняется с помощью пользовательского ввода, затем его значения выбираются и сравниваются с видеообъектами из БД. Все видео объекты загружаются в фоновом режиме и вставляются в массив.

Answer 1

1. опечатка во внутреннем HTML;
2. getElementsByClassName возвращает коллекцию, которая не имеет innerHTML
3. use type="button"
4. у вас есть 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()
  });
});