Minor change required with this Javascript Code -
so code:
<!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 bluish 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); }); //----------------- // come in 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 info $("#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) { motion = $(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(); motion = (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 motion = (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')) { (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> i want alter color in motion cell according data. if the current value lower preceding value want reddish , if current value more preceding value want green. believe requires minor alter in "movement function"
please help.
here jsfiddle scenario: click here
is not happens. have tested jsfiddle (http://jsfiddle.net/4qbwk/), behaviour seems little odd, think fits have specified.
the alter think needed remove of code format_cell() function seems randomly lite cells in either reddish or green. have commented out on jsfiddle: http://jsfiddle.net/4qbwk/1/
so have instead:
function format_cell(row, col, pre_value) { calculate_grid(); } javascript
No comments:
Post a Comment