专栏首页前端菜鸟变老鸟表格按列方向上渲染数据

表格按列方向上渲染数据

表格按列方向渲染数据

需求:

如图按两列渲染数据:

如果是一条数据和一个对应的值就不会出现问题。但是如果某一个数据的值有多个,并且需要显示在不同的行的话就会有问题。问题是:会循环出多个td在一行中。

解决方案1

<tr>
    <td>m2</td>
    <td>
        <div>
            <ul>
            <% for(var i=0;i<item_length;i++){ %>
                <li class="stylenone"><%=JSON.stringify(values[i]);%></li>
                <% } %>
            </ul>
        </div>
    </td>
</tr>

结果:

说明:在td里面加上li标签,循环渲染li标签。

解决方案2

方案一其实很蠢…… 我们可以直接这样:

<tr>
     <td rowspan=<%=item_length+1;%>>m2</td>
</tr>
<% for(var i=0;i<item_length;i++){ %>
<tr>
    <td><%=JSON.stringify(values[i]);%></td>
</tr>
<% } %>

结果:

这里要注意的是,跨行的数量要比实际渲染数量多1, 表格的基本操作都忘了,所以记一笔。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 知识点:回到顶部(减速)、滚动禁用和启用、判断滚动条位置显示某元素、使用jQuery判断字符串是不是json格式

    方法: 1. 锚点 2. scrollTop 3. scrollTo 4. scrollBy 5. scrollIntoView

    从入门到进错门
  • ES6(一):let和const

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/caomage/article/details/835...

    从入门到进错门
  • JS自定义右键菜单—复制到粘贴板(jQuery和原生JS实现)

    从入门到进错门
  • html基础+常用标签

    程序员同行者
  • 17.HTML

    HTML简介 htyper text markup language  即超文本标记语言。 超文本: 就是指页面内可以包含图片、链接,甚至音乐、程序等非文字元素...

    zhang_derek
  • CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

    一、浏览器兼容 1.1、概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核亦不尽相同,相同内核的版本不同...

    张果
  • jQuery+Ajax+PHP 制作简单的异步数据传输(测试用户名是否可用)

    实现基本异步数据传输,略去与数据库交换,先直接在PHP端判断:用户名为 user1 即为不可用,

    书童小二
  • pytest_allure2

    zx钟
  • html5 列表 表格 学习笔记

    LRainner
  • HTML/CSS/JavaScript学习笔记【持续更新】

    HTML <font> 标签 定义和用法 <font> 规定文本的字体、字体尺寸、字体颜色。 实例 规定文本字体、大小和颜色: 1 <font size="3"...

    Angel_Kitty

扫码关注云+社区

领取腾讯云代金券