jQuery 动态添加表格数据demo效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
    }
    th, td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }
    td {
      font: 14px "微软雅黑";
    }
    tbody tr {
      background-color: #f0f0f0;
    }
    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
  </style>
  <script src="jquery-3.4.1.js"></script>
  <script>
    // 模拟从后台拿到的数据
    var data = [
      {
        name: "dzm",
        url: "http://www.baidu.cn",
        type: "最靓的仔"
      },
      {
        name: "xyq",
        url: "http://www.baidu2.cn",
        type: "哈哈哈哈"
      },
      {
        name: "djy",
        url: "http://www.baidu2.cn",
        type: "啦啦啦啦啦啦"
      }
    ];

    $(document).ready(function () {
      // 绑定点击事件
      $('#button').click(function () {
        // 利用for循环或者forEach把数组中的数据组成标签字符串
        var str = '';

        // for 方式：这是最原生的写法
        for (let index = 0; index < data.length; index++) {
          const item = data[index];
          str += "<tr><td>"+item.name+"</td><td>"+item.url+"</td><td>"+item.type+"</td></tr>"
        }

        // forEach 方式
        // data.forEach((item, index) => {
        //   str += `
        //   <tr>
        //     <td>${item.name}</td>
        //     <td>${item.url}</td>
        //     <td>${item.type}</td>
        //   </tr>
        //   `
        // });

        // 塞入展示
        $('#tbData').html(str);
      })
    })
  </script>
</head>
<body>
  <input type="button" value="获取数据" id="button">
  <table>
    <thead>
      <th>标题</th>
      <th>地址</th>
      <th>说明</th>
    </thead>
    <tbody id="tbData">
      <!-- <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr> -->
    </tbody>
  </table>
</body>
</html>
demo 效果：