與這段JavaScript代碼

-1

需要輕微改變，因此這是代碼：與這段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 + '\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

來源

2014-06-18 user3659592

你真的需要減少您張貼到只有那些您認爲是行的代碼量影響。 – Andy

http://sscce.org/ –

這是不是已經發生的情況。我測試了jsfiddle（http://jsfiddle.net/4QBwK/），行爲似乎有點奇怪，但我認爲它符合您指定的內容。

我認爲唯一需要改變的是去掉format_cell()函數中的大部分代碼，它似乎是隨機點亮紅色或綠色的單元格。我曾評論它在這的jsfiddle：http://jsfiddle.net/4QBwK/1/

所以，你會只是有這個代替：

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

來源

2014-06-18 10:39:54 user3751909

不，它應該改變顏色。如果上面的值是7，下一個值是5，那麼它就會變成紅色。我正在談論運動專欄。如果值爲負，它只會變紅。 – user3659592

與這段JavaScript代碼

回答

相關問題