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

Question

大家下午好，

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

controller中获取数据并传递给查看的方法：

         [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>```

对不起我的英语不好。

Answer 1

使用jquery 模板。 创建一个带有普通 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);