Question

我有两个数组，我想创建一个包含动态标头单元格的表（来自第一个数组subjects）并迭代添加内容（来自第二个数组examscores）关于表头值的表行。

期望的结果是（fiddle）：

erb代码是：

 <table width="100%" border="1">
 <thead>
 <tr>
 <th rowspan="2" scope="col">NAME</th>
 <th colspan="<%= @subjects_by_class.size %>" scope="col">Subjects/Scores</th>
 <th rowspan="2" scope="col">Total</th>
 <th rowspan="2" scope="col">Average</th>
 </tr>
 <tr>
 <% @subjects_by_class.each do |s| %>
 <th> <%= s.name %></th>
 <% end %>
 </tr>
 </thead>
 <tbody>
 <% @examscore.each do |ex| %>
 <tr>

 <td><%= get_student_name_by_id(ex.student_id) %></td>

 <% @subjects_by_class.each do |ss| %>
 <% @examscore.each do |ii| %>

 <% if ss.id == ex.subject_id %>
 <td> <%= i.total %> </td>
 <% break %>
 <% end %>

 <% end %>
 <% end %>

 <td><%= sum_student_totalscore(ex.student_id, year_id) %> </td>
 <td><%= avg_student_totalscore(ex.student_id, year_id) %></td>
 </tr>
 <% end %>
 </tbody>
 </table>

我得到的输出是（fiddle）：

在tr主题下创建新的Maths而不是td主题的新Arts，这会产生Average td被扭曲了。

非常感谢任何见解。

Answer 1

好吧，看看代码的这一部分：

<tbody>
  <% @students.each do |student| %>
    <tr>
      <td><%= student.name %></td>
      <% @subjects_by_class.each do |subject| %>
        <% @examscore.each do |score| %>
          <% if score.subject_id == subject.id && score.student_id == student.id %>
            <td><%= score.total %></td>
            <% break %>
          <% end %>
        <% end %>
      <% end %>
      <td><%= sum_student_totalscore(student.id, year_id) %> </td>
      <td><%= avg_student_totalscore(student.id, year_id) %></td>
    </tr>
  <% end %>
</tbody>

您为每个@examscore创建一个新行，并且您有4个（每个用户/主题1个，所以当然最终会有4行）。

你的身体应该是这样的：

# Returns an array of scores for the given year
def scores(year, subject_ids)
  subject_ids.map do |subject_id|
    # find score for year & the given subject_id
  end
end

有点奇怪，你只关心总计中的年份

此外，您可以通过在Student课程中使用一个方法来改进一些特定年份/主题列表的分数数据，从而改善一些事情

<tbody>
  <% @students.each do |student| %>
    <tr>
      <td><%= student.name %></td>
      <% @scores = student.scores(year_id, @subjects_by_class) %>
      <% @scores.each do |score| %>
        <td><%= score.total %></td>
      <% end %>
      <% scores_total = @scores.sum(&:total) %>
      <td><%= scores_total %> </td>
      <td><%= scores_total / @scores.size.to_f %></td>
    </tr>
  <% end %>
</tbody>

这样你的身体就会变成

var btn = document.querySelector("button");
btn.addEventListener("click", hide(this, true));
function hide(event, reflow) {
  if(reflow) {
    document.querySelector(".great").classList.add("hidden");
  }
}

我发现它更清楚，但可以通过装饰器进一步改进。

如何创建非静态HTML表头和行

1 个答案: