JS表格渲染

开发工具与关键技术：后端
作者：汪
撰写时间：2019年7月27日
我通常渲染表格都是用Layui插件渲染的，用原生的JS应该怎么渲染呢？

这个表格是我自己用JS渲染的，属性名、属性值是表头，下面五行，我在数据库那边设计五张表，一行一张表。

表格代码：

:定义表格的行
:设置表格头（表头自带黑体加粗居中效果）
:定义表格的单元格

JS代码：

///表格渲染
$(function () {
 ///型号
  $.post("SelectModelNumber", function (data) {
    var str = "";///声明变量
    str+="新增属性值"
  for (var i = 0; i < data.length; i++) {///for循环
    var ModelNumber = data[i].ModelNumber;///型号
    var ModelNumberID = data[i].ModelNumberID; ///型号ID
 if (i == 0) {///字符串拼接
    str+= "

    
    " + ModelNumber + "
";
} else {
    str+= "

    
    " + ModelNumber + "
";
          }
      }
  $("#ModelNumber").html(str);/// @*新增属性ID*@的HTML代码
 });

控制器查询方法：

public ActionResult SelectColour()
        {
            var Linq = from tbColour in myModels.B_Colour
                       select new
                       {
                           tbColour.ColourID,//颜色ID
                           tbColour.Colour//颜色
                       };
            return Json(Linq, JsonRequestBehavior.AllowGet);
        }

表格渲染完成。