时间戳

首页 > 解决方案 > 如何在作为列表推送的 HTML 页面上构建表格？

javascript - 如何在作为列表推送的 HTML 页面上构建表格？

问题描述

我正在尝试将.csv页面上的内容显示为表格。该列表包括取决于用户的未知行和列。它不是像 2x2 或 3x4 这样的固定类型。但我得到了类似以下的东西；

       [
    [
    &
    #
    x
    2
    7
    ;
    x
    x
.......

我正在重定向一个列表，也尝试过json。列表的内容不固定。长度和柱边是可靠的。我正在尝试正确传递数据并显示为表格返回列表；

return render(request, 'yuklenen.html', {'veriler': yuklenen, 'file': listx })

我想将其显示为 <div id="contain"></div>

这是代码： 

 <script>
        var str = '<ul>';
        var data1 = "{{file}}" ;
    
        for(var x in at){
            str+='<li>' + at[x] + '<li>';
        }
    
 
    str += '</ul>';
    document.getElementById("contain").innerHTML = str;
    
 
  </script>

标签： javascriptjavahtmlcss

解决方案

希望这会让你开始：

function rand(min, max)
{
  return Math.round(Math.random() * (max - min) + min);
}
function update()
{
  const at = [];
  for(let x = 0; x < rand(3, 10); x++)
  {
    const c = [];
    for(let y = 0; y < rand(1, 10); y++)
    {
      c[y] = rand(0, 100);
    }
    at[x] = c;
  }

  var str = '<ul>';

  for(var x in at){
      str+='<li>';
      for(var y in at[x])
        str += "<span>" + at[x][y] + "</span>";

      str+='</li>';
  }

  str += '</ul>';
  document.getElementById("contain").innerHTML = str;
}
update();
ul
{
  display: table;
  border-collapse: collapse;
}
li
{
  display: table-row;
}

li > span
{
  border: 1px solid black;
  vertical-align: middle;
  text-align: center;
  display: table-cell;
  width: 2em;
  height: 2em;
}
<button onclick="update()">update</button>
<div id="contain"></div>

推荐阅读