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);
相关推荐
我登哥MVP35 分钟前
HTML-CSS-JS-入门学习笔记
javascript·css·笔记·学习·html
Mintopia38 分钟前
架构进阶 🏗 从 CRUD 升级到“大工程师视野”
前端·javascript·全栈
Mintopia40 分钟前
小样本学习在 WebAI 场景中的技术应用与局限
前端·人工智能·aigc
光影少年42 分钟前
vue生态都有哪些?
前端·javascript·vue.js
一只大头猿1 小时前
基于SpringBoot和Vue的超市管理系统
前端·vue.js·spring boot
木易 士心1 小时前
MPAndroidChart 用法解析和性能优化 - Kotlin & Java 双版本
android·java·kotlin
后端小张1 小时前
SpringBoot 控制台秒变炫彩特效,秀翻同事指南!
java·后端
好家伙VCC1 小时前
**标题:发散创新:探索AR开发框架的核心技术**随着增强现实(AR)技术的飞速发展,AR开发框架成为了开发者们关注的焦
java·ar
用户1456775610371 小时前
告别繁琐操作!Excel合并原来可以这么轻松
前端
itslife1 小时前
vite 源码 - 创建 ws 服务
前端·javascript