當下拉值更改時更新html表格

Question

從json我需要根據javascript和月份和年份更新表。

任何辦法是爲我好

僅供參考我創建了FIDDLE，但它尚未完成，只是想表明真實環境

鏈接：：http://jsfiddle.net/qytdu1zs/1/

HTML

個

<div class="dropdown"> 
    <select name="one" class="dropdown-select"> 
    <option value="">Select Year</option> 
    <option value="0">2014</option> 
    <option value="1">2013</option> 
    <option value="2">2012</option> 
    </select>   
</div> 


<div class="dropdown "> 
    <select name="two" class="dropdown-select"> 
    <option value="">Select Month</option> 
    <option value="0">January</option> 
    <option value="1">February</option> 
    <option value="2">March</option> 
    <option value="3">April</option> 
    <option value="4">May</option> 
    <option value="5">June</option> 
    <option value="6">July</option> 
    <option value="7">August</option> 
    <option value="8">September</option> 
    <option value="9">October</option> 
    <option value="10">November</option> 
    <option value="11">December</option> 
    </select>   
</div> 

HTML表格

<div id="example1"></div> 

Jquery的 - 我已經使用mustache.js

$.ajax({ 
    url : 'data/front_finance.json', 
    dataType : 'json', 
    success : function (json) { 

     var customer = $('#example1').columns({ 
       data : json, 
       schema : [{ 
         "header" : "ID", 
         "key" : "id", 
         "template" : "{{id}}" 
        }, { 
         "header" : "Name", 
         "key" : "name", 
         "template" : '<a href="#" onclick="javascript:ShowDialog(this.id);return false;" id="{{name}}" class="topopup">{{name}}</a>' 
        }, { 
         "header" : "Actual", 
         "key" : "actual" 
        }, { 
         "header" : "Target", 
         "key" : "target" 
        }, { 
         "header" : "Status", 
         "key" : "status", 
         "template" : "<img src ='{{status}}' alt='{{status}}'></img>" 
        }, { 
         "header" : "Trend", 
         "key" : "trend", 
         "template" : "<img src ='{{trend}}' alt='{{trend}}'></img>" 
        } 
       ] 
      }); 
    } 
}); 

JSON

[ 
    { 
    "year": "2013", 
    "jan": [ 
     { 
     "id": 1, 
     "name": "data", 
     "actual": "17", 
     "target": "19", 
     "status": "red", 
     "trend": "down" 
     } 
    ], 
    "Feb": [ 
     { 
     "id": 2, 
     "name": "data1", 
     "actual": "10", 
     "target": "19", 
     "status": "red", 
     "trend": "down" 
     } 
    ], 
    "March": [ 
     { 
     "id": 3, 
     "name": "data2", 
     "actual": "34", 
     "target": "19", 
     "status": "green", 
     "trend": "down" 
     } 
    ] 
    }, 
    { 
    "year": "2014", 
    "jan": [ 
     { 
     "id": 1, 
     "name": "data", 
     "actual": "17", 
     "target": "19", 
     "status": "red", 
     "trend": "down" 
     } 
    ], 
    "Feb": [ 
     { 
     "id": 2, 
     "name": "data1", 
     "actual": "10", 
     "target": "19", 
     "status": "red", 
     "trend": "down" 
     } 
    ], 
    "March": [ 
     { 
     "id": 3, 
     "name": "data2", 
     "actual": "34", 
     "target": "19", 
     "status": "green", 
     "trend": "down" 
     } 
    ] 
    } 
] 

Answer 1

NEW FIDDLE FIDDLE

$(document).ready(function(){ 
cloneObj= $("#example1").clone(); 
$('select[name=one]').on('change', function() { 
    var selectedYear=($("option:selected", this).text()); 
    if (selectedYear!="Select Year"){ 

    for (var a in data){ 

     if(data[a].year==selectedYear){ 

      objMonth=data[a]; 

      return false; 
     } 
     } 
    }else{ 
    objMonth=null; 
    } 
}); 
$('select[name=two]').on('change', function() { 
var selectedYear=($("option:selected", $('select[name=one]')).text()); 
    if (selectedYear!="Select Year"){ 
     var selectedMonth=($("option:selected", this).text()); 
     var jsonValue=objMonth[MonthMap[selectedMonth]]; 
     $("#example1").replaceWith(cloneObj.clone()); 

     $('#example1').columns({ data : jsonValue});  
    }else{ 
    alert("Please Select year please"); 
    } 
}); 
}); 

Answer 2

我會給你一個關於如何去做這件事的方法。現在，我不知道td和tr是如何結構化的，所以我不能給你確切的代碼，你可以複製你的表的確切html。

你讓用戶從下拉列表中選擇你可以在jquery中獲得的值的月份和年份。如果根據月份存儲在JSON陣列中的月份的方式設置option值，那麼最大的幫助是什麼。

//JSON array is structured somewhat like: 

    "jan": [ 
    { 
    "id": 1, 
    "name": "data", 
    "actual": "17", 
    "target": "19", 
    "status": "red", 
    "trend": "down" 
    } 
] 

//Your HTML could be 
<select name="two" class="dropdown-select"> 
<option value="">Select Month</option> 
<option value="jan">January</option> 
<option value="Feb">February</option> 
<option value="March">March</option> 

儘管這不是必須的，這將極大地在JSON訪問陣列中的相應值的幫助。否則，您需要將option值或文本映射到數組或合適的數據結構形式的月份名稱。

var selectedMonth; 
var selectedYear; 
//Store the information selected from the dropdown menu for month and year respectively 
//Assuming the JSON array is named arr 
$.each(arr, function(index, value) { 
    if (arr[index]['year'] == selectedYear){ 
     var foo = arr[index]['year'][selectedMonth][0]; //Based on your array defintion 
     //You can access the required info of this object by simply doing: 
     //foo.id,foo.name,foo.status etc. and update the relevant table elements' html here 
    } 
}); 

我希望這能讓你開始朝正確的方向發展。