时间戳

首页 > 解决方案 > 使用搜索结果生成表格的最佳方式

javascript - 使用搜索结果生成表格的最佳方式

问题描述

我有一个页面显示有关视频统计的数据。所有数据都来自 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>

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

我在 HTML 中也有一个带有 class="result-table" 的空 div。

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

标签： javascriptc#htmlrazor

解决方案

  1. innerHTML 中的错字；
  2. getElementsByClassName 返回一个没有 innerHTML 的集合
  3. 利用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()
  });
});

推荐阅读