簡體   English   中英

更新:使用Javascript / Jquery更改負預定值的顏色

[英]Update: Changing the color of Negative Predetermined Value Using Javascript/Jquery

我正在工作的一個項目正在使用D3.js從CSV文件的表格中獲取值(一年中目錄的毛利潤)。

這個想法是當在CSV文件中更改數字時,刷新時html格式將更改為新值。 示例:今天我們賺了$ xx.xx的金額(在CSS中應該是綠色的樣式),但是第二天我們賺了-$ xx.xx(由於我們為負,所以值將是紅色的樣式)。

更新時間

這是新的代碼,用於更好地控制哪些表在顏色為負或正的情況下會發生文本顏色更改:

$( document ).ready( function() {
$( '#tableTwo tr' ).each(function() {
    $( this ).find( 'td' ).each(function() {
        //if cell value is less than 0, then change font color.
        console.log( $( this ).html() );
    });
});
});

假定如果為負,則更改預定值,但沒有收到錯誤,也沒有任何變化。 該代碼的腳本標簽在表格標簽下方,因為d3.js也在表格標簽的底部。 這樣做的原因是,在d3.js中,有一些函數會在html中調用div來將數據也從csv放入:

    <link rel="stylesheet" type="text/css" href="jean.css"/>
    <link rel="stylesheet" type="text/css" href="bootstrap.min.css">
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
    <div class="container">
            <div><h1 id = "headerFormat">Catalog 6F Matchback Report</h1> </div>

                <div id="firstCSV"></div>
                <div id="secondCSV"></div>
                <div id="thirdCSV"></div>
                <table id ="theSecretOne">
                    <thead>
                        <tr>
                            <th>Labor Cost Parameter</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Labor Cost</td>
                            <td>7%</td>
                        </tr>
                    </tbody>   

                </table>
                <div id ="fourthCSV"></div>
                <table id = "findMEPosition">
                    <tbody>
                        <tr>
                            <td>report revenue /cost corresponds to catalog allocated revenue/cost</td>
                        </tr>
                    </tbody>
                </table>
                <div id="fifthCSV"></div>
                <div id="sixthCSV"></div>
                <div id="seventhCSV"></div>
                <div id="miscPosition"></div>
            <!--<script>
                $(document).ready( function(){
                    $("td.of_number_be_evaluated:contains('-')").addClass('red');
                    $("td.of_number_be_evaluated:contains('+')").addClass('green');
                });
            </script>-->

    </div>
</body>
<script type='text/javascript' src="jean.js"></script> <!-- d3.js script to fill the table from the CSV file-->

<script type='text/javascript' src="numberColorChange.js"></script> <!-- color Change script-->
</html>

我意識到在Chrome的Inspection頁面上的jQuery代碼之前放置了一個斷點之后,D3.js在jQuery代碼之后運行,因此沒有任何變化。 是否有某種類型的函數可用於延遲jQuery腳本,以便D3.js可以將值放入要讀取的表中?

誰能幫我? 如果需要更多編碼,我可以提供更多信息,因為使用虛擬數據來查看該項目將花費多長時間。

因此,我意識到在處理CSV文件數據時,當我想更改為其他值(貨幣,數字,十進制等)時,EXCEL會更改其值以適合其結構。 因此,我在Sublime Text上打開了CSV文件,以查看值的實際格式。

然后,我使用Use JQuery中的 Javascript 突出顯示表中的值

即使我更改Sublime中的文本,顏色也可以完美改變。 謝謝每一位指出我正確方向的人。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM