HTML5, CSS3 and JavaScript demo

/* Write JavaScript here */
 var json_6_line = {table:
            {id:'datatable', 
             'class':'datatable_class_6_lines',
             rows:{
               rows_count:6,
               columns_count:2,
               0:[ 
                    {id:'td01', textContent:'td 01'},
                    {id:'td02', textContent:'td 02', bgcolor:'red', input:true, idp:'text1'}
                 ],
               1:[
                    {id:'td03', textContent:'td 03'},
                    {id:'td04', textContent:'td 04', bgcolor:'green', input:true, idp:'text2'}
                 ],
               2:[
                    {id:'td05', textContent:'td 05'},
                    {id:'td06', textContent:'td 06', bgcolor:'blue', input:true, idp:'text3'}                                      
                 ],
               3:[
                    {id:'td07', textContent:'td 07'},
                    {id:'td08', textContent:'td 08', bgcolor:'orange', input:true, idp:'text4'}                                             
                 ],
               4:[
                    {id:'td09', textContent:'td 09'},
                    {id:'td10', textContent:'td 10', bgcolor:'yellow', input:true, idp:'text5'}                                                           
                 ],
               5:[
                    {id:'td11', bgcolor:'grey',textContent:'text 1'},    
                    {id:'td12', bgcolor:'grey',textContent:'text 2'}
                                                                   
                 ]
               }
              }
            };

var json_2_line = {table:
            {id:'datatable', 
             'class':'datatable_class_2_lines',
             rows:{
               rows_count:2,
               columns_count:6,
               0:[ 
                         {id:'td01', textContent:'td 01'},
                         {id:'td03', textContent:'td 03'},
                         {id:'td05', textContent:'td 05'},
                         {id:'td07', textContent:'td 07'},
                         {id:'td09', textContent:'td 09'},
                         {id:'td11', bgcolor:'grey',textContent:'text 1'}
                 ],
               1:[
                 {id:'td02', textContent:'td 02', bgcolor:'red', input:true, idp:'text1'},
                 {id:'td04', textContent:'td 04', bgcolor:'green', input:true, idp:'text2'},
                 {id:'td06', textContent:'td 06', bgcolor:'blue', input:true, idp:'text3'},
                 {id:'td08', textContent:'td 08', bgcolor:'orange', input:true, idp:'text4'},
                 {id:'td10', textContent:'td 10', bgcolor:'yellow', input:true, idp:'text5'},
                         {id:'td12', bgcolor:'grey',textContent:'text 2'}
                                                                   
                    ]
                   }
              }
            };
            
var body = document.body;

var row = [];
var rowClone = [];
var column = [];
var field = {};

function build_array(json, nb){
    //(typeof(table) === "object") ? table.remove() : '';
    var table = document.createElement('table');
 // console.log(json);
  for(var i = 0;i < json.table.rows.rows_count; i++){
   // if(action === 'add'){
        row[i] = table.insertRow(i);
        
        for(var j=0; j < json.table.rows.columns_count; j++){
            column[j] = row[i].insertCell(j);
            column[j].id = json.table.rows[i][j].id + "_" + nb;
            if(json.table.rows[i][j].input === true){
               // console.log("dddddd " + sessionStorage.getItem(json.table.rows[i][j].idp));
                json.table.rows[i][j].textContent = (typeof(table) === "object") ? sessionStorage.getItem(json.table.rows[i][j].idp) : json.table.rows[i][j].textContent;
                field[j] = (json.table.rows.rows_count === 2) ?
                '<input onblur="saveinputs(this.id, this.value)" onchange="saveinputs(this.id, this.value)" type="text" value="' + json.table.rows[i][j].textContent + '" style="width:35px;" id="'+ json.table.rows[i][j].idp+ "_" + nb +'">' :
                '<input onblur="saveinputs(this.id, this.value)" onchange="saveinputs(this.id, this.value)" type="text" value="' + json.table.rows[i][j].textContent + '" id="'+ json.table.rows[i][j].idp + "_" + nb +'">';
                column[j].innerHTML = (field[j]);
            }else{
                column[j].textContent = json.table.rows[i][j].textContent;
            }
            var isbg = (json.table.rows[i][j].bgcolor !== "") ? json.table.rows[i][j].bgcolor : '';
            column[j].setAttribute('bgcolor', (isbg===undefined) ? "" : isbg);
        }
    table.id = json.table.id + "_" + nb;
    table.class = json.table.class;
    table.setAttribute("class", json.table.class); 
  };
  body.appendChild(table);
   return true;
}

function saveinputs(id, value, classes){
      //on clone en mode localstorage
      if(id === null || id === undefined){
        $(classes + ' input').each(function(){
            $(this).change(function(){
               // console.log("ca marche ici on regarde un peu...")
              //  sessionStorage.removeItem($(this).attr('id'));
                sessionStorage.setItem($(this).attr('id'), $(this).attr('value'));
                var reftab = sessionStorage.getItem($(this).attr('id')); 
                console.log(reftab)
                $(this).attr('value', reftab);
            });
            $(this).change();
        });
      }else{
        sessionStorage.setItem(id, value);
        var reftab = sessionStorage.getItem(id);
        console.log(reftab);
      }
}
function loadData(){
            $('input').each(function(){
            $(this).change(function(){
               // console.log("ca marche ici on regarde un peu...")
              //  sessionStorage.removeItem($(this).attr('id'));
                var reftab = sessionStorage.getItem($(this).attr('id')); 
                console.log(reftab)
                $(this).attr('value', reftab);
            });
            $(this).change();
        });
};
$('#sticker_button').click(function () {
   // $('table').remove();
   // saveinputs(null, null, '.datatable_class_2_lines');
    loadData();
    $('.datatable_class_6_lines').css({'display':'none'});
    $('.datatable_class_2_lines').css({'display':'block'});
});
$('#table_button').click(function () {
   // $('table').remove();
  //  saveinputs(null, null, '.datatable_class_6_lines');
    loadData();
    $('.datatable_class_6_lines').css({'display':'block'});
    $('.datatable_class_2_lines').css({'display':'none'});
});
$('#add_button').click(function () {
   // $('table').remove();
   build_array(json_6_line, $('.datatable_class_6_lines').length);
   build_array(json_2_line, $('.datatable_class_6_lines').length-1);
   $('.datatable_class_2_lines').css({'display':'none'});
   $('.datatable_class_6_lines').css({'display':'block'});
});