html table表格动态显示

html

html 复制代码
<table class="tab-scroll"  cellpadding="0" cellspacing="0" bgcolor="">
      <thead>
        <tr align="center">
           <th style="width: 50%;">问题名称</th>
           <th style="width: 50%;">涉及用户(局)</th>
        </tr>
      </thead>
   <tbody id="rankdetail2">
 </tbody>
</table>

js动态渲染数据

javascript 复制代码
方法一:
data = [
      {
        name: '世界你好1',
        relateCustomer: '111'
      },
      {
        name: '世界你好2',
        relateCustomer: '222'
      },
      {
        name: '世界你好3',
        relateCustomer: '333'
      },
      {
        name: '世界你好4',
        relateCustomer: '444'
      },
      {
        name: '世界你好5',
        relateCustomer: '555'
      },
      {
        name: '世界你好6',
        relateCustomer: '666'
      }
    ];
    for (var i = 0; i < result.data.length; i++) {
      var row = $('#rankdetail2')[0].insertRow(-1);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      cell1.innerHTML = data[i].name;
      cell1.style.textAlign = "center";
      cell2.innerHTML = data[i].relateCustomer;
      cell2.style.textAlign = "center"; 
    }
javascript 复制代码
方法二:
data = [
      {
        name: '世界你好1',
        relateCustomer: '111'
      },
      {
        name: '世界你好2',
        relateCustomer: '222'
      },
      {
        name: '世界你好3',
        relateCustomer: '333'
      },
      {
        name: '世界你好4',
        relateCustomer: '444'
      },
      {
        name: '世界你好5',
        relateCustomer: '555'
      },
      {
        name: '世界你好6',
        relateCustomer: '666'
      }
    ];
    var row = document.createElement("tr");
    var cell1 = document.createElement("td");
    var cell2 = document.createElement("td");
    cell1.innerHTML = data[i].name;
    cell1.setAttribute("style", "text-align: center;");  // 设置单元格中文字居中显示
    cell2.innerHTML = data[i].relateCustomer;
    cell2.setAttribute("style", "text-align: center;");  // 设置单元格中文字居中显示

    row.appendChild(cell1);
    row.appendChild(cell2);
    $('#rankdetail2')[0].appendChild(row);
相关推荐
黑云压城After4 分钟前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
芙蓉王真的好19 分钟前
NestJS API 提示信息规范:让日志与前端提示保持一致的方法
前端·状态模式
dwedwswd16 分钟前
技术速递|从 0 到 1:用 Playwright MCP 搭配 GitHub Copilot 搭建 Web 应用调试环境
前端·github·copilot
2501_9387742930 分钟前
Leaflet 弹出窗实现:Spring Boot 传递省级旅游口号信息的前端展示逻辑
前端·spring boot·旅游
meichaoWen1 小时前
【CSS】CSS 面试知多少
前端·css
我血条子呢1 小时前
【预览PDF】前端预览pdf
前端·pdf·状态模式
90后的晨仔1 小时前
报错 找不到“node”的类型定义文件。 程序包含该文件是因为: 在 compilerOptions 中指定的类型库 "node" 的入口点 。
前端
90后的晨仔1 小时前
5分钟搭建你的第一个TypeScript项目
前端·typescript
zcl_19912 小时前
记一次ThreadLocal导致的生产事故
java
专注前端30年2 小时前
Vue2 中 v-if 与 v-show 深度对比及实战指南
开发语言·前端·vue