`

Js / React 循环数据表格一行多列的情况

    博客分类:
  • js
阅读更多

最终呈现效果:

 

数据结构:

const hfAmounts = [2, 5, 10, 20, 50, 100, 200];

 

React循环遍历:

<table>
  <tbody>
  {
    hfAmounts.map((v, i) =>
      i % 3 === 0 ?
        <tr key={i}>
          {
            hfAmounts.slice(i, (i % 3 === 0 ? i + 3 : i % 3)).map((y, j) =>
              <td key={j}>{y}元</td>
            )
          }
        </tr>
        : null
    )
  }
  </tbody>
</table>

 

方案2(Div or li实现):

{
  hfAmounts.map((v, i) =>
    <div key={i}>{v}元</div>
  )
}
{
  Array.apply(null, {length: 3 - hfAmounts.length % 3}).map((v, i) =>
    <div key={i}>&nbsp;</div>
  )
}

 

  • 大小: 10.5 KB
分享到:
评论

相关推荐

    js实现表格单列按字母排序

    总结起来,这个示例提供了基本的 JS 表格单列排序功能,但可能需要根据实际需求进行扩展,例如添加多列排序、数字排序、复杂数据类型的排序等。为了实现更高级的功能,可以考虑使用前端框架如 Vue 或 React,或者...

    JavaScript实现动态生成表格

    在用户界面上,通常会有一个或多个输入框让用户输入所需生成的表格的行数和列数,然后通过点击按钮触发JavaScript函数来生成相应的表格。在给定的示例中,HTML部分包括两个输入框(id分别为"row"和"col")用于输入行...

    Table Sorting

    在前端开发中,JavaScript库如jQuery、React或Vue.js都提供了方便的数据绑定和事件处理功能,可以轻松实现表格排序功能。同时,后端也可能需要处理排序逻辑,特别是在大数据量或服务器端渲染的情况下。 除了基本的...

    根据当前年月得到日(天),每行显示7列,有效果图

    在IT领域,尤其是在网页开发和数据可视化中,创建表格(table)是一种常见的数据展示方式。题目中的"根据当前年月得到日(天),每行显示7列"涉及到的知识点包括日期处理、表格布局以及可能的前端开发技术。下面将...

    JavaScript自定义分页样式.docx

    `data`数组模拟了实际数据源,每个子数组代表一行数据。`for`循环将数据转化为HTML的`&lt;tr&gt;`元素,并存入`inner`数组。之后,`myPagination`函数被调用,传入表格的ID、数据列表以及每页显示的条目数(`PageSize`)。...

    cross-tabulation:使用Core js和HTML的CSV数据的列联表用于制表和结果

    这个过程涉及数据解析、表格创建、计算统计量以及增强交互性等多个步骤,对于理解JavaScript在数据处理和Web开发中的应用大有裨益。在实际项目中,根据具体需求,还可以结合其他库和框架,如D3.js或React,进一步...

    Treegrid 编码

    - **排序**:用户可以根据一列或多列数据对数据进行升序或降序排序。 - **筛选**:允许用户根据指定条件过滤显示的数据。 - **懒加载**:当用户展开节点时,只加载当前需要的子节点,降低初始加载数据量。 - **...

    HTML&javascript自学

    12. **JavaScript 基础**:JavaScript 用于添加交互性,比如响应用户操作、处理数据、更新DOM(文档对象模型)。基本的 JavaScript 语句包括变量声明(`var/let/const`)、条件语句(`if/else`)、循环(`for/while`...

    php输出表格的实现代码(修正版)

    此外,对于动态生成的表格,可以考虑使用前端框架如jQuery或现代的JavaScript库(如React、Vue.js或Angular)来增强交互性,例如添加点击事件、数据排序、分页等特性。在上述代码中,提到了使用jQuery实现的功能,如...

    Javascript遍历Html Table示例(包括内容和属性值)

    接着,外层循环遍历每一行(tr),内层循环遍历每一列(td)。`innerText`属性则用来获取每个单元格(td)中的文本内容,并通过`alert()`函数显示出来。 接下来,我们看第二种方法:遍历Table,读取CheckBox的状态...

    JavaScript 学习历程和心得分享

    例如,在使用表格布局时,动态生成一个3行3列的列表需要多层嵌套循环,而如果使用li元素配合CSS浮动布局,一次循环即可完成任务。 其次,掌握开发和测试工具对于学习JavaScript至关重要。推荐的工具包括Web...

    js实现的验证,学习用js控制td

    这是一个`HTMLCollection`,可以遍历来访问每一行。 3. **循环遍历表格行**: - `for (var i = 0; i ; i++)`:遍历`rows`集合,`i`作为索引访问每一行。 4. **单元格操作**: - `rowObj.cells`:`cells`属性返回...

    generador_de_horarios_Practica

    了解JavaScript的基本语法、变量、数据类型、控制流程(如条件语句和循环)以及函数是开始这个项目的前提。此外,掌握数组和对象的使用对于处理复杂的课程表数据至关重要。 二、DOM操作 Document Object Model (DOM...

    java面试问题汇总(非常全面)

    使用 JSTL 标签 `&lt;c:forEach&gt;` 循环遍历数据集合,动态构建表格。 #### 49. JSP和Servlet的区别 - **JSP**:主要用于页面渲染,支持脚本语言。 - **Servlet**:主要用于处理业务逻辑,返回数据给 JSP 渲染。 ####...

    Learn-html-css-js

    6. 浮动:`float`属性(left、right)让元素脱离正常文档流,常用于创建多列布局。 7. 响应式设计:利用媒体查询(`@media`)根据设备特征调整样式,实现跨设备兼容。 JavaScript 是前端开发的重要脚本语言,主要...

Global site tag (gtag.js) - Google Analytics