Question

我想在我的观点中做一些条件格式化。

请查找示例图像以供参考。

我想以红色显示“收到的现金”。

首先，我想以这样的方式检查条件：如果说明中存在“现金”，那么“收到现金”的整个字符串必须以红色显示。

<div class="container-fluid">

  <% balance = 0 %>

  <div class="table-responsive myTable">

    <table class="table listing text-center">
      <tr class="tr-head">
        <td>Date</td>
        <td>Description</td>
        <td>Amount</td>
        <td>Discount</td>
        <td>Paid</td>
        <td>Balance</td>
      </tr>

      <tr>
        <td></td>
      </tr>

 <% @statements.each do |statement| %>

      <tr class="tr-<%= cycle('odd', 'even') %>">

        <td class="col-1"><%= statement.date %></td>

        <% color = (statement.description == "TT" || statement.description == "cash") ? "neg" : "pos" %>

        <td class="col-3 <%= color %>"><%= statement.description %></td>

        <td class="col-1"><%= number_with_precision(statement.amount, :delimiter => ",", :precision => 2) %></td>

        <td class="col-1 neg"><%= number_with_precision(statement.discount, :delimiter => ",", :precision => 2) %></td>

        <td class="col-1 neg"><%= number_with_precision(statement.paid, :delimiter => ",", :precision => 2) %></td>


        <% balance += statement.amount.to_f - statement.discount.to_f - statement.paid.to_f %>

        <% color = balance >= 0 ? "pos" : "neg" %>

        <td class="col-1 <%= color %>"><%= number_with_precision(balance.abs, :delimiter => ",", :precision => 2) %></td>

      </tr>

      <% end %>

    </table>
  </div>
</div>

新编辑的index.html

<div class="container-fluid">

  <h1>361° YAZD Statement</h1>

  <% balance = 0 %>

  <div class="table-responsive myTable">

    <table class="table listing text-center">
      <tr class="tr-head">
        <td>Date</td>
        <td>Description</td>
        <td>Amount</td>
        <td>Discount</td>
        <td>Paid</td>
        <td>Balance</td>
      </tr>

      <tr>
        <td></td>
      </tr>


      <% @statements.each do |statement| %>

      <tr class="tr-<%= cycle('odd', 'even') %>">

        <td class="col-1"><%= statement.date %></td>


        <td class="col-3"><%= span_with_possibly_red_color statement.description %></td>

        <td class="col-1"><%= number_with_precision(statement.amount, :delimiter => ",", :precision => 2) %></td>

        <td class="col-1 neg"><%= number_with_precision(statement.discount, :delimiter => ",", :precision => 2) %></td>

        <td class="col-1 neg"><%= number_with_precision(statement.paid, :delimiter => ",", :precision => 2) %></td>


        <% balance += statement.amount.to_f - statement.discount.to_f - statement.paid.to_f %>

        <% color = balance >= 0 ? "pos" : "neg" %>

        <td class="col-1 <%= color %>"><%= number_with_precision(balance.abs, :delimiter => ",", :precision => 2) %></td>

      </tr>

      <% end %>

    </table>
  </div>
</div>

statements_helper.rb

require 'active_support/concern'

    module StatementsHelper



        extend ActiveSupport::Concern
        include ActionView::Helpers::TagHelper



        def span_with_possibly_red_color(content)
            classes = if content.split.map(&:downcase).include?("cash")
                {class: "red"}
            else
                {}
            end
            content_tag(:span, content, classes)
        end


    end

失败项目的html输出;

现金

 <td class="col-3"><span class="red">cash</span></td>

收到现金

<td class="col-3"><span class="red">cash received</span></td>

Answer 1

按照OP在评论中的要求在jQuery中实现这一点：

jquery的：

$('#mytable td:nth-child(2):contains("cash")').css("color", "red")

HTML：

<table id="mytable">
    <tr><td>date</td><td>cash received</td><td>amount</td></tr>
    <tr><td>date</td><td>Blabla</td><td>amount</td></tr>
    <tr><td>date</td><td>Blabla</td><td>amount</td></tr>
    <tr><td>date</td><td>Blabla</td><td>amount</td></tr>
</table>

和jsfiddle here：点击运行以查看它是否有效。

Answer 2

你可以设置一个像

这样的视图助手

require 'set'

RED_WORDS = %w[cash tt].to_set

def span_with_possibly_red_color(content)
    classes = if (RED_WORDS & content.split.map(&:downcase)).present?
        {class: "red"}
    else
        {}
    end
    content_tag(:span, content, classes)
end

并在您的视图中使用

<%= span_with_possibly_red_color statement.description %>

Rails 4.2.1中的条件文本颜色格式

2 个答案: