如何使用 ajax 调用创建动态 html 表答案

【问题标题】：How to create dynamic html table with ajax call如何使用 ajax 调用创建动态 html 表
【发布时间】：2021-02-12 11:26:40
【问题描述】：

大家下午好，

这是我在 asp.net mvc 中的第一个项目。我想显示从控制器到视图的数据库中具有可用库存数量的产品列表。它显示正确，但在产品名称中只有第一个单词显示 Ex。 (Raw Steel) 那么只有 Raw 正在显示。但是如果我将其更新为 RawSteel，那么它将显示为 RawSteel。

控制器中获取数据并将其传递给视图的方法：

         [HttpGet]
        public JsonResult Get_StkData(int id=0)
        {
            Session["Outwordid"] = id;
            Outword obj_Outword = new Outword();
            List<Outword> outword_list = new List<Outword>();
            outword_list = obj_stckdb.Get_MaterialwiseStock();
            return Json(outword_list, JsonRequestBehavior.AllowGet);
        }

     function get_Materialstock(id) {
            $.ajax({
                url: "/SalesStock/Get_StkData/" + id,
                type: "GET",
                contentType: "application/json;charset=UTF-8",
                dataType: "json",
                success: function (data) {
                    var row;

                    $.each(data, function (i, v1) {
                        row += "<tr><td><input class='nm form-control' readonly id='nm' value=" + v1.Material_nm + " /></td><td><input class='quantity form-control' readonly id='quantity' value=" + v1.Avail_Qty + " /></td><td><input class='rq form-control' id='rq' value='0' /></td><td style='visibility: collapse'><input class='mid form-control' readonly id='mid' value=" + v1.Material_Id + " /></td></tr>"
                    });
                    $("#custTable").append(row);
                    $('#modal-updateStock').modal('show');
                }
            });```

产品
名称

                        <th style="width:150px;text-align:center">Available <br />Quantity</th>

                        <th style="width:150px;text-align:center">Used <br />Quantity</th>
                        <th style="visibility:collapse">Material_Id</th>
                    </tr>
                
            </table>```

对不起我的英语。

【问题讨论】：

标签： javascript c# asp.net model-view-controller

【解决方案1】：

使用jquery template。创建一个带有普通 jquery/javascript 附加行的模板是一件很痛苦的事情。基本上你要做的（如果你不想使用插件）是给你的 tbody 一个 id（在这个例子中是 tbodyItems）然后：

var html = "";
for(var i = 0; i < data.length; i++){
  html += "<tr>";
  html += `<td>${data[i].something}</td>`;
  html += `<td>${data[i].otherSomething}</td>`;
  html += `<td>${data[i].anotherSomething}</td>`;
  html += "</tr>";
}
$("#tbodyItems").html(html);

【讨论】：