update html table when dropdown value change

Question

From json i need to update the table based on month and year from javascript.

Any approach is fine for me

For reference i have created the FIDDLEbut it is not complete yet, just want to show the real environment

link: :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 Table

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

Jquery - i have used 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

We have a table ABC. In that table we have a column which contains dropdown as select having value as blank, option a, option b. Now, with change with this dropdown I want to update the input field accordingly, i.e; if a is chosen, input field value will be 100, if b is chosen, input field will be 0 and if blank is chosen, input field will be blank , readonly. The input field id is set to input_ where i is 1 to no of rows in the table. Below is the code for implementing this.

HTML :

<select id="select" onChange="changeEvent(this.options[this.selectedIndex].value);" name="select">

Javascript:

function changeEvent(chosen) {
        var table = document.getElementById("ABC");
        var rows = document.querySelectorAll('tr');
        var rowsArray = Array.from(rows);
        table.addEventListener('change', (event) => {
        var target = event.target.toString();
        var rowIndex = rowsArray.findIndex(row => row.contains(event.target));
        var x = table.rows.length;
        var id = "input_"+(parseInt(rowIndex) - 2).toString();
        if(chosen === "a") {
                table.rows[rowIndex].cells.item(3).innerHTML="<td><input value='100' id='"+id+" 'style='width:50px;'></input></td>"; 
                return;
        }else if(chosen === "b"){

                table.rows[rowIndex].cells.item(3).innerHTML="<td><input value='0' id='"+id+"' readonly style='width:50px;'></input></td>";
                return;
        }else{ 
            table.rows[rowIndex].cells.item(3).innerHTML="<td><input value='' id='"+id+"' readonly style='width:50px;'></input></td>";
            return;
        }
      })
    }

Answer 2

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 3

I'll give you an approach on how to go about this. Now, I don't know the exact html of your table how the td and tr are structured, so I'm not going to be able to give you exact code that you can replicate.

You let the user select the month and year from the dropdown whose value you can get in jquery. What would help here greatly is if you have the option values set according to the way months are stored in the JSON array.

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

Although this is not a necessity, this would greatly help in accessing the corresponding values in the JSON array. Otherwise you would require a mapping of the option values or text to the month names in form of an array or a suitable data structure.

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
    }
});

I hope this gets you started in the right direction.