Question

所以这就是代码：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{font-family:Arial, Helvetica, sans-serif;font-size:12px;}
table{width:700px;margin:auto;border:solid 5px #cccccc}
table th{border-right:solid 1px #cccccc;border-bottom:solid 1px #000000;padding:5px;}
table th:last-child{border-right:0px;}
table td{border-right:solid 1px #d0d7e5;border-bottom:solid 1px #d0d7e5;}
table td:last-child{border-right:0px;}
table tr:last-child td{border-bottom:0px;}
table td input{padding:5px 0px;margin:auto;white-space:nowrap;overflow:hidden;outline:none;border:solid 1px #ffffff;text-align:center;width:99%;}
table td input.green{background:#00b050;border:solid 1px #00b050;}
table td input.red{background:#ff0000;border:solid 1px #ff0000;}
table td.active input{border:dotted 1px #333333;}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
    var row_template = "<tr><td><input type='text' value='0.00' maxlength='5' /></td><td><input type='text' value='0.00' maxlength='5' /></td><td><input type='text' value='0.00' maxlength='5' /></td></tr>";
    var active_row;
    var active_col;

    // Initialize cell width
    //$("table td").each(function()
    //{
        //var width = $(this).width();
        //$(this).find("input").width(width-2);
    //});
    //----------------------

    // Set Focus of cell
    $("table").on("focus", "tr td input", function()
    {
        var row_count = $("table tr").size()-1;
        $("table td").removeClass();        
        active_col = $(this).closest("td").index()+1;
        active_row = $(this).closest("tr").index();
        $(this).parent().addClass("active");
        $(this).val("");
        if(active_row == row_count)
        {
            $("table").append(row_template);
        }
    });
    //------------------

    // Set Blue of cell
    $("table").on("blur", "tr td input", function(e)
    {
        var value = $(this).val();
        if(isNaN(value) || value == "")
        {
            value = 0;
        }
        $(this).val(parseFloat(value).toFixed(2));
        format_cell(active_row, active_col);
    });
    //-----------------

    // Enter key on cell
    $("table").on("keydown", "tr td input", function(e)
    {
        var value = $(this).val();
        if(e.keyCode == 13)
        {
            $(this).blur();
            if(active_col == 2)
            {
                $("table tr").eq(active_row).find("td").eq(active_col).find("input").focus();
            }
            else if(active_col == 3)
            {
                $("table tr").eq(active_row+1).find("td").eq(active_col-2).find("input").focus();
            }
            return(false);
        }
        else
        {
            if(value.length == 2)
            {
                $(this).val(value+".");
            }
        }
    });
    //------------------

    // Download data
    $("#btn_download").click(function()
    {
        var json = "";
        var movement;
        var pdi;
        var ndi;

        json += "[";
        json += '{"movement":"Movement","pdi":"PDI","ndi":"NDI"},';

        $("table tr:gt(0)").each(function(r)
        {
            movement = $(this).find("td").eq(0).find("input").val();
            pdi = $(this).find("td").eq(1).find("input").val();
            ndi = $(this).find("td").eq(2).find("input").val();

            movement = (movement==0?"0":movement);
            pdi = (pdi==0?"0":pdi);
            ndi = (ndi==0?"0":ndi);

            if(r==0)
            {
                json += '{"movement":"'+movement+'","pdi":"'+pdi+'","ndi":"'+ndi+'"}';
            }
            else
            {
                json += ',{"movement":"'+movement+'","pdi":"'+pdi+'","ndi":"'+ndi+'"}';
            }

        });
        json += "]";        
        var csv = json_to_csv(json);
        window.open("data:text/csv;charset=utf-8," + escape(csv));
    });
    //--------------
});

function format_cell(row, col, pre_value)
{
    var pre_value = $("table tr").eq(row-1).find("td").eq(col-1).find("input").val();
    var value = $("table tr").eq(row).find("td").eq(col-1).find("input").val();

    if(col == 3)
    {
        if(parseFloat(value) < parseFloat(pre_value))
        {
            $("table tr").eq(row).find("td").eq(col-1).addClass("active").find("input").removeClass("red").addClass("green");
        }
        else if(parseFloat(value) > parseFloat(pre_value))
        {
            $("table tr").eq(row).find("td").eq(col-1).addClass("active").find("input").removeClass("green").addClass("red");
        }
        else
        {
            $("table tr").eq(row).find("td").eq(col-1).addClass("active").find("input").removeClass("green red");
        }
    }
    else
    {
        if(parseFloat(value) > parseFloat(pre_value))
        {
            $("table tr").eq(row).find("td").eq(col-1).addClass("active").find("input").removeClass("red").addClass("green");
        }
        else if(parseFloat(value) < parseFloat(pre_value))
        {
            $("table tr").eq(row).find("td").eq(col-1).addClass("active").find("input").removeClass("green").addClass("red");
        }
        else
        {
            $("table tr").eq(row).find("td").eq(col-1).addClass("active").find("input").removeClass("green red");
        }
    }
    calculate_grid();
}

function calculate_grid()
{
    $("table tr:gt(0)").each(function(r)
    {
        var pdi = $(this).find("td").eq(1).find("input").val();
        var ndi = $(this).find("td").eq(2).find("input").val();
        var movement = (parseFloat(pdi) - parseFloat(ndi)).toFixed(2);
        r=r+1;

        $(this).find("td").eq(0).find("input").val(movement);
        if(movement > 0)
        {
            $(this).find("td").eq(0).find("input").removeClass("red").addClass("green");
        }
        else if(movement < 0)
        {
            $(this).find("td").eq(0).find("input").removeClass("green").addClass("red");
        }
        else
        {
            $(this).find("td").eq(0).find("input").removeClass("green red");
        }
    });
}

function json_to_csv(objArray)
{
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;

    var str = "";
    var line = "";

    if($("#labels").is(':checked'))
    {
        var head = array[0];
        if($("#quote").is(':checked'))
        {
            for(var index in array[0])
            {
                var value = index + "";
                line += '"' + value.replace(/"/g, '""') + '",';
            }
        }
        else
        {
            for(var index in array[0])
            {
                line += index + ',';
            }
        }
        line = line.slice(0, -1);
        str += line + '\r\n';
    }

    for(var i=0;i<array.length;i++)
    {
        var line = "";

        if ($("#quote").is(':checked'))
        {
            for (var index in array[i])
            {
                var value = array[i][index] + "";
                line += '"' + value.replace(/"/g, '""') + '",';
            }
        }
        else
        {
            for(var index in array[i])
            {
                line += array[i][index] + ',';
            }
        }
        line = line.slice(0, -1);
        str += line + '\r\n';
    }
    return(str);
}
</script>
<title>Excel</title>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
    <tr>
        <th width="30%">Movement Data</th>
        <th width="35%">PDI</th>
        <th width="35%">NDI</th>
    </tr>
    <tr>
        <td><input type="text" value="0.00" maxlength="5" /></td>
        <td><input type="text" value="0.00" maxlength="5" /></td>
        <td><input type="text" value="0.00" maxlength="5" /></td>
    </tr>
    <tr>
        <td><input type="text" value="0.00" maxlength="5" /></td>
        <td><input type="text" value="0.00" maxlength="5" /></td>
        <td><input type="text" value="0.00" maxlength="5" /></td>
    </tr>
    <tr>
        <td><input type="text" value="0.00" maxlength="5" /></td>
        <td><input type="text" value="0.00" maxlength="5" /></td>
        <td><input type="text" value="0.00" maxlength="5" /></td>
    </tr>
    <tr>
        <td><input type="text" value="0.00" maxlength="5" /></td>
        <td><input type="text" value="0.00" maxlength="5" /></td>
        <td><input type="text" value="0.00" maxlength="5" /></td>
    </tr>
    <tr>
        <td><input type="text" value="0.00" maxlength="5" /></td>
        <td><input type="text" value="0.00" maxlength="5" /></td>
        <td><input type="text" value="0.00" maxlength="5" /></td>
    </tr>
</table>
<center><input type="button" id="btn_download" value="Download" /></center>
</body>
</html>

我想根据数据更改移动单元格中的颜色。如果当前值低于前一个值，我希望它为红色，如果当前值大于前一个值，则我希望它为绿色。我认为它需要对“运动功能”进行微小改动

请帮忙。

以下是该场景的jsfiddle：Click Here

Answer 1

这不是已经发生的事情。我已经测试了jsfiddle（http://jsfiddle.net/4QBwK/），行为似乎有点奇怪，但我认为它符合您的指定。

我认为唯一需要改变的是从format_cell()函数中删除大部分代码，这些函数似乎随机点亮了红色或绿色的单元格。我在这个jsfiddle上评论过它：http://jsfiddle.net/4QBwK/1/

所以你只需要这样：

function format_cell(row, col, pre_value)
{
    calculate_grid();
}

此Javascript代码需要进行小的更改

1 个答案: