Bedingte Textfarbformatierung in Rails 4.2.1

Question

Ich möchte eine bedingte Formatierung in meinen Ansichten vornehmen.

Finden Sie das Beispielbild für die Referenz.

Picture1

Ich will "cash received" in roter Farbe angezeigt werden soll.

Zuerst möchte ich den Zustand so prüfen, dass, wenn "cash" in der Beschreibung steht, der ganze String, der "cash received" ist, in roter Farbe angezeigt werden muss.

<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> 

neu editierten 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-Ausgabeelemente für nicht bestanden haben;

für Bargeld

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

für Bargeld

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

Answer 1

erhalten Sie könnten einen View Helfer wie

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 

und verwenden Sie es in Ihrer Ansicht einrichten

<%= span_with_possibly_red_color statement.description %> 

Answer 2

In Bezug auf diese in jQuery zu erreichen, wie durch OP in den Kommentaren angefordert:

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> 

Und ein jsfiddle here: Klick laufen, um zu sehen, wie es funktioniert.