更新:使用Javascript / Jquery更改负预定值的颜色 [英] Update: Changing the color of Negative Predetermined Value Using Javascript/Jquery

查看:122
本文介绍了更新:使用Javascript / Jquery更改负预定值的颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在开发一个工作项目,其中使用D3.js从CSV文件的表中获取值(一年中目录的毛利润)。

I am working on a project at work, where taking values (gross profit of catalogs over the course of a year) from a table from a CSV file using D3.js.

这个想法是当CSV文件中的一个数字被改变时,html格式将在刷新时改变为新的值。示例:今天我们做了$ xx.xx amount(这应该是CSS中的样式颜色绿色),但是第二天我们 - $ xx.xx(值将是一个样式颜色红色,因为我们是负的)。

The idea is when a number is changed in a CSV file, the html format will change to the new value when refreshed. Example: today we made $xx.xx amount (which should be a style color green in CSS) but then the next day we make -$xx.xx (which the value will be a style color red because we are negative).

已更新

这是新代码,如果为负或正,则表将具有文本颜色改变:

This is the new code used to have more control over which tables will have a text color change if negative or positive:

$( 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中:

which is suppose to change the predetermined value if negative, but received no errors and nothing changed. The script tag for this code is below the table tag since d3.js is also on the bottom of the table tag. Reason for this, in d3.js have functions calling the divs in the html to place the data form the csv too:

    <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可以放在要读取的表中的值?

I have realized after placing a break point right before the jQuery code on Inspection page on Chrome, the D3.js is running after the jQuery code, which results in no change. Is there some type of function that can be used to delay the jQuery script, so that D3.js can place in the values to the table to be read?

任何人帮我?

推荐答案

因此,我需要更多的编码,我可以提供更多,因为使用哑元数据来看看这个项目需要多长时间。在使用CSV文件数据时实现,当我想改变为不同的值(货币,数字,小数等)时,EXCEL改变了值以适应其结构。所以,我打开了Sublime Text上的CSV文件,看看值是如何实际格式化。

So, I realized while playing with the CSV files data, EXCEL was changing the values to fit its structure when I wanted to change to different value (currency, number, decimal, etc). So, I opened the CSV files on Sublime Text to see how the values are actually formatted.

然后,我使用了来自的Javascript使用JQuery以突出显示表中的值

即使我更改Sublime中的文本,颜色也完全变化。感谢每一个指向我的方向正确的人。

The colors changed perfectly fine even if I change the text in Sublime. Thank you every one who pointing me in the right direction.

这篇关于更新:使用Javascript / Jquery更改负预定值的颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆