Fatal编程技术网
  • javascript/
  • 此Javascript代码需要进行微小更改

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

javascript

此Javascript代码需要进行微小更改,javascript,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/ht

这就是代码：

 <!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>


正文{字体系列：Arial，Helvetica，无衬线；字体大小：12px；}
表{宽度：700px；边距：自动；边框：实心5px#cccc}
表th{右边框：实心1px#cccccc；底部边框：实心1px#000000；填充：5px；}
表th：最后一个子项{右边框：0px；}
表td{右边框：实心1px#d0d7e5；底部边框：实心1px#d0d7e5；}
表td:最后一个子项{右边框：0px；}
表tr：最后一个子项td{border bottom:0px；}
表td输入{填充：5px 0px；边距：自动；空白：nowrap；溢出：隐藏；轮廓：无；边框：实心1px#ffffff；文本对齐：中心；宽度：99%；}
表td input.green{背景：00b050；边框：实心1px#00b050；}
表td input.red{background:#ff0000；border:solid 1px#ff0000；}
表td.active输入{边框：虚线1px#333333；}
$（文档）.ready（函数（）
{
var row_template=“”；
var活跃行；
活性炭；
//初始化单元格宽度
//$（“表td”）。每个（函数（）
//{
//var width=$（this.width（）；
//$（this.find（“input”）.width（width-2）；
//});
//----------------------
//设置单元格的焦点
$（“表”）。关于（“焦点”，“tr td输入”，函数（）
{
变量行计数=$（“表tr”）.size（）-1；
$（“表td”）.removeClass（）；
活动列=$（this）.closest（“td”）.index（）+1；
active_row=$（this）.closest（“tr”）.index（）；
$（this.parent（）.addClass（“活动”）；
$（此）.val（“”）；
如果（活动行==行计数）
{
$（“表”）.append（行模板）；
}
});
//------------------
//设置蓝色单元格
$（“表格”）。关于（“模糊”，“tr td输入”，函数（e）
{
var值=$（this.val（）；
如果（isNaN（值）| |值==“”）
{
数值=0；
}
$（this）.val（parseFloat（value）.toFixed（2））；
格式化单元格（活动行、活动列）；
});
//-----------------
//输入单元格上的键
$（“表”）。在（“键控”、“tr td输入”功能上（e）
{
var值=$（this.val（）；
如果（e.keyCode==13）
{
$（this.blur（）；
如果（活动列==2）
{
$（“table tr”）.eq（活动列）.find（“td”）.eq（活动列）.find（“输入”）.focus（）；
}
else if（活动列==3）
{
$（“表tr”）.eq（活动列+1）.查找（“td”）.eq（活动列-2）.查找（“输入”）.focus（）；
}
返回（假）；
}
其他的
{
如果（value.length==2）
{
$（此）.val（值+”）；
}
}
});
//------------------
//下载数据
$（“#btn_下载”）。单击（函数（）
{
var json=“”；
var运动；
var-pdi；
var ndi；
json+=“[”；
json+='{“移动”：“移动”，“pdi”：“pdi”，“ndi”：“ndi”}；
$（“表tr:gt（0）”）。每个（函数（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（）；
移动=（移动==0？“0”：移动）；
pdi=（pdi==0？：0:pdi）；
ndi=（ndi==0？“0”：ndi）；
如果（r==0）
{
json+='{“移动”：“'+movement+'”，“pdi”：“'+pdi+'”，“ndi”：“'+ndi+'”}'；
}
其他的
{
json+='，{“移动”：“'+movement+'”，“pdi”：“'+pdi+'”，“ndi”：“'+ndi+'”}'；
}
});
json+=“]”；
var csv=json-to-csv（json）；
打开（“数据：text/csv；字符集=utf-8，”+escape（csv））；
});
//--------------
});
函数格式\u单元格（行、列、前置值）
{
var pre_值=$（“表tr”）.eq（第1行）。查找（“td”）.eq（第1列）。查找（“输入”）.val（）；
var值=$（“表tr”）.eq（行）.find（“td”）.eq（列-1）.find（“输入”）.val（）；
如果（列==3）
{
if（parseFloat（值）parseFloat（pre_值））
{
$（“表tr”）.eq（行）.find（“td”）.eq（列1）.addClass（“活动”）.find（“输入”）.removeClass（“绿色”）.addClass（“红色”）；
}
其他的
{
$（“表tr”）.eq（行）.find（“td”）.eq（列1）.addClass（“活动”）.find（“输入”）.removeClass（“绿-红”）；
}
}
其他的
{
if（parseFloat（值）>parseFloat（pre_值））
{
$（“表tr”）.eq（行）.find（“td”）.eq（列1）.addClass（“活动”）.find（“输入”）.removeClass（“红色”）.addClass（“绿色”）；
}
else if（parseFloat（value）0）
{
$（this.find（“td”）.eq（0）.find（“输入”）.removeClass（“红色”）.addClass（“绿色”）；
}
否则如果（移动<0）
{
$（this.find（“td”）.eq（0）.find（“input”）.removeClass（“绿色”）.addClass（“红色”）；
}
其他的
{
$（this.find（“td”）.eq（0）.find（“input”）.removeClass（“绿-红”）；
}
});
}
函数json_to_csv（objArray）
{
var array=typeof objArray！=“object”？JSON.parse（objArray）：objArray；
var str=“”；
var line=“”；
如果（$（“#标签”）.is（'：ch

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