如何精美地创建动态表?

时间:2018-02-28 19:46:23

标签: html ruby html-table

如何设置像这样的表格标签?

          col1  col2  col3 col4
         _____ _____ _____ _____
 row1   |     |_____|_____|     |
 row2   |     |_____|_____|     |
 row3   |     |_____|_____|     |
 row4   |_____|_____|_____|_____|

我知道使用属性rowspan让布局像这样

跟随我的代码:

  <table>
  <tr>
    <th>number</th>
    <th>type</th>
    <th>quantity</th>
    <th>amount</th>
  </tr>
  <tr>
    <td rowspan="5">a</td>
    <td>b</td>
    <td>c</td>
    <td rowspan="5">d</td>
  </tr>
  <tr>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>b</td>
    <td>c</td>
  </tr>
  <tr>
    <td>b</td>
    <td>c</td>
  </tr>
</table>

但就我而言,代码位于ruby each do方法的迭代器中。 col1的项目都是相同的,但col2和col3的项目都是动态的,col4是col3计算(sum)的结果。

我过去通过重复从row1到row4的相同值来布局col1的方式比较愚蠢:

<table>
  <tr>
    <th>number</th>
    <th>type</th>
    <th>quantity</th>
    <th>amount</th>
  </tr>
  <%@deals.each do |staff, deals|%>
    <%if staff%>
    <% @total_deal_type = deals.group_by(&:type).count%>
      <%deals.group_by(&:type).each do |type, deals|%>
      <tr>
        <td><%=staff.number%></td>
        <%case type%>
          <%when "service1"%>
          <%@d=staff.service1*deals.count%>

            <td><%=type%></td>
            <td><%= deals.count%></td>


          <%when "service2"%>
          <%@d2=staff.service2*deals.count%>

            <td><%=type%></td>
            <td><%= deals.count%></td>


          <%when "service3"%>
          <%@nc=staff.service3*deals.count%>

            <td><%=type%></td>
            <td><%= deals.count%></td>


          <%when "service4"%>
          <%@add=staff.service4*deals.count%>

            <td><%=type%></td>
            <td><%= deals.count%></td>


          <%when "service5"%>
          <%@bh=staff.service5*deals.count%>

            <td><%=type%></td>
            <td><%= deals.count%></td>

        <%end%>
      </tr>

      <%end%>
      <!--<p>amount:<%=@d.to_i+@d2.to_i+@nc.to_i+@add.to_i+@bh.to_i%></p>-->

    <%end%>

  <%end%>

</table>

所以我想合并相同的值。

这有什么方法可以做到这一点?

0 个答案:

没有答案