在微信小程序中将二维数组展示为表格

最新推荐文章于 2023-07-05 10:31:36 发布

Cheveny

最新推荐文章于 2023-07-05 10:31:36 发布

阅读量1.6k

点赞数

分类专栏：微信小程序开发文章标签：小程序数组 js javascript

本文链接：https://blog.csdn.net/wmm8854/article/details/109403265

版权

本文介绍了如何在微信小程序中将JavaScript二维数组转化为表格显示。通过设置WXSS样式，JS中定义数据，并在WXML中使用for循环生成表格结构，实现了动态显示表格内容。

摘要由CSDN通过智能技术生成

最近在开发一个微信小程序，其中有一个功能需要把JavaScript中的二维数组在小程序页面中展示为表格的形式。效果如下图：
在这里插入图片描述
首先，在WXSS文件中设置表格的样式：

  .su-table-box {
   
    height: 100%;
    margin: 0rpx 30rpx;
    overflow-x: auto;
    padding-bottom: 40rpx;
  }

  .strataTable {
   
    margin-top: 50rpx;
    display: table;
    border-collapse: collapse; /*合并边框*/
    overflow-x: auto;  /* 宽度不能设置，要完全显示可以用*/
    word-break: keep-all;   /* 设置不换行*/
    white-space: nowrap;
    background-color: #FFFFFF;
  }

  .su-tr {
   
    display