彩色化正/負號（jQuery的）

Question

我想在一個表中，以顏色數爲更好的可讀性：

• 綠色爲陽性（00.00）;
• 紅色爲負數（-00.00）;
• 黑色默認情況下（無需登錄）

Answer 1

這裏亞去：

$(document).ready(function() { 

    // the following will select all 'td' elements with class "of_number_to_be_evaluated" 
    // if the TD element has a '-', it will assign a 'red' class, and do the same for green. 

    $("td.of_number_to_be_evaluated:contains('-')").addClass('red'); 
    $("td.of_number_to_be_evaluated:contains('+')").addClass('green'); 
} 

然後使用CSS樣式輸入元素：

td.red { 
    color: red; 
} 

td.green { 
    color: green; 
} 

Answer 2

首先，要做到這一點，如果數字是靜態的最好的方法是在服務器端。分配基於價值的一類：

<td class="positive">+34</td> 
<td class-"negative">-33</td> 

有：

td { color: black; } 
td.positive { color: green; } 
td.negative { color: red; } 

（或者，如果你需要更多的選擇性）。

但是如果你必須這樣做在客戶端上，我可能會建議：

$("td").each(function() { 
    var text = $(this).text(); 
    if (/[+-]?\d+(\.\d+)?/.test(text)) { 
    var num = parseFloat(text); 
    if (num < 0) { 
     $(this).addClass("negative"); 
    } else if (num > 0) { 
     $(this).addClass("positive"); 
    } 

    } 
}); 

您可能需要根據你想趕上什麼樣的數字來調整正則表達式（如1.2e11或3456） 。

爲什麼正則表達式不只是parseFloat()？因爲：

parseFloat("34 widgets"); 

返回34.如果這沒問題，那麼使用它並跳過正則表達式測試。

Answer 3

的CSS：

.pos { color:green; } 
.neg { color:red; } 

的標記

<table> 
    <tr><td>+11.11</td><td>-24.88</td><td>00.00</td></tr> 
    <tr><td>-11.11</td><td>4.88</td><td>+16.00</td></tr> 
</table> 

代碼

$('td').each(function() { 
    var val = $(this).text(), n = +val; 
    if (!isNaN(n) && /^\s*[+-]/.test(val)) { 
    $(this).addClass(val >= 0 ? 'pos' : 'neg') 
    } 
}) 

Answer 4

這裏是更完整的解決方案：

<script> 
$(document).ready(function() { 
// get all the table cells where the class is set to "currency" 
$('td.currency').each(function() { 
//loop through the values and assign it to a variable 
    var currency = $(this).html(); 
//strip the non numeric, negative symbol and decimal point characters 
// e.g. Spaces and currency symbols 
    var val = Number(currency.replace(/[^0-9\.-]+/g,"")); 
// check the value and assign class as necessary 
// (I'm sure this could be done with a switch statement 
    if(val > 0) { 
     $(this).addClass('positive'); 
    } 
    if(val < 0) { 
     $(this).addClass('negative'); 
    } 
    }) 
}) 
</script> 

感謝阿倫·羅在http://www.alunr.com/articles/jquery-addclass-to-positive-and-negative-values-on-a-page

Answer 5

設置了貨幣領域提供驗證碼在td上聽課，然後聽取那個td上的變化事件，然後根據o ñ值應該添加適當的CSS類來改變顏色。

Answer 6

僅限CSS，沒有JavaScript解決方案。 我在這裏找到http://rpbouman.blogspot.ru/2015/04/css-tricks-for-conditional-formatting.html

/* right-align monetary amounts */ 
 
    td[data-monetary-amount] { 
 
     text-align: right; 
 
    } 
 

 
    /* make the cells output their value */ 
 
    td[data-monetary-amount]:after { 
 
     content: attr(data-monetary-amount); 
 
    } 
 

 
    /* make debit amounts show up in red */ 
 
    td[data-monetary-amount^="-"]:after { 
 
     color: red; 
 
    }

<table border="1"> 
 

 
    <tr> 
 
    <th>Gain</th> 
 
    <td data-monetary-amount="$100"></td> 
 
    </tr> 
 

 
    <tr> 
 
    <th>Losst</th> 
 
    <td data-monetary-amount="-$100"></td> 
 
    </tr> 
 

 
    </table>