Требуется незначительное изменение в этом коде Javascript

ProgramBox

Требуется незначительное изменение в этом коде Javascript

Post author:admin
Запись опубликована:12 февраля, 2023
Post category:Вопросы по программированию

#javascript

Вопрос:

Итак, это код:

  <!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   'rn';
    }

    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   'rn';
    }
    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 для сценария: нажмите здесь

Ответ №1:

Разве это не то, что уже происходит. Я протестировал jsfiddle (http://jsfiddle.net/4QBwK /), поведение кажется немного странным, но я думаю, что оно соответствует тому, что вы указали.

Единственное изменение, которое, я думаю, необходимо, — это удалить большую часть кода из format_cell() функции, которая, кажется, случайным образом освещает ячейки красным или зеленым цветом. Я прокомментировал это в этом jsfiddle: http://jsfiddle.net/4QBwK/1 /

Так что вместо этого у вас просто будет это:

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

1. Нет, предполагается, что он меняет цвета. Если указанное выше значение, скажем, равно 7, а следующее значение равно 5, то предполагается, что оно станет красным. Я говорю о столбце перемещения. Он становится красным только в том случае, если значение имеет отрицательное значение.