html table表格动态显示

小政爱学习！2024-02-21 12:34

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);