表を操作する

HTML

   <h3 class="pointB">JSONを表にする</h3>
   <p>JSONになっている発電機のデータファイルを読み込み、表にする</p>
   <button id="button1" class="ui-button ui-widget ui-corner-all">JSONを表にする</button>
   <br />
   <div id="tablej"></div>
     

Javascript

// 下記を読みこませておく！
function makeTable(idName, data)
{
 var rt = "";
 rt += '   <table id="' + idName + '" class="tableG">' + LF;
 for(var i in data)
 {
  var data1 = data[i];
  //console.table(data1);
  for(var j in data1)
  {
   //console.log("data["+ i + ", " + j + "]=" + data1[j]);
   if(i == 0)
   {
    if(j == 0)
    {
     rt += '    <thead>'+LF;
     rt += '     <tr>'+LF;
    }
    rt += '      <th width="15%">' + data1[j] + '</th>'+LF;

   }
   else
   {
    if(j == 0)
    {
     if(i == 1)
     {
      rt += '     </tr>' + LF;
      rt += '    </thead>' + LF;
      rt += '    <tbody>' + LF;
      rt += '     <tr>' + LF;
     }
     else
     {
      rt += '     </tr>' + LF;
      rt += '     <tr>' + LF;
     }
    }
    rt += '      <td>' + data1[j] + '</td>' + LF;
   }
  }
 }
 rt += '     </tr>' + LF;
 rt += '    </tbody>' + LF;
 rt += '   </table>' + LF;
 return rt;
}

$("#button1").click(function(event)
{
 var fname="json/hatsudenki.json";
 console.log(fname);
 $.getJSON(fname,function(data)
 {
  console.table(data);
  var rt = makeTable("jquery-tablesorter-table2", data)
  console.log(rt);
  $("#tablej").html(rt);
  //listSakusei(data, "#out3");
 });
});

     

CSS

HTML

   <button id="button2" class="ui-button ui-widget ui-corner-all">表に入力できるようにする</button>
   <br />
   <div id="status"></div>
     

Javascript

  $("#button2").click(function(event)
  {
   $("#jquery-tablesorter-table2 > tbody > tr > td").click(edit_toggle());
  });

  function edit_toggle()
  { // 表の値を書き換える処理
   var edit_flag=false;
   return function()
   {
   if(edit_flag) return;
    var row = $(this).closest('tr').index();//theadのtrはカウントされない
    var col = this.cellIndex;
    console.log("row="+row+", col="+col);
  
    var ir = $(this).parent()[0].rowIndex;//theadのtrもカウントされる
    var ic = this.cellIndex;
    console.log("ir=" +ir+", ic="+ic);
  
    var $input = $("<input>").attr("type","text").val($(this).text());
    $(this).html($input); 
  
    $("input", this).focus().blur(function()
    {
     $(this).after($(this).val()).unbind().remove();// var $input = $("<input>").attr("type","text").val($(this).text());
     edit_flag = false;//     $(this).html($input); 
    });
  
   }
  }
     

CSS

HTML

   <h3 class="pointB">上記の表に加えられた変更を保存する</h3>
   <p>上記の表のデータを取得し、JSONのファイルとして保存する。</p>
   <button id="button3" class="ui-button ui-widget ui-corner-all">表のデータを保存する</button>
     

Javascript

  $("#button3").click(function(event)
  {
   //表の値を配列に。配列をJSONに
   var data = [];
   var tr = $("#jquery-tablesorter-table2 tr");//全行を取得
   console.log(tr.length);
   for( var i=0,l=tr.length;i<l;i++ )
   {
    var cells = tr.eq(i).children();//1 行目から順にth、td問わず列を取得
    for( var j=0,m=cells.length;j<m;j++ )
    {
     if( typeof data[i] == "undefined" )
      data[i] = [];
     data[i][j] = cells.eq(j).text();//i行目j列の文字列を取得
     console.log("data["+i+"]["+j+"]="+data[i][j]);
    }
    //配列をJSONに変換
    var json_data = JSON.stringify(data, null, 1);

    console.log(json_data );
    saveData("json","hatsudenki2.json",data);
   }

 });

 function saveData(folder, fileName, data)
 {
  $.post(
        'php/save.php',
        { フォルダ: folder, ファイル : fileName, データ :data },
        function( data, textStatus )
        {
         if(textStatus == 'success')
         {
          $('#status') . text('書き出し成功');
         }
         console.log(data);
        }
        ,'html'
    );
    if( $('#status').text() == '' ) {
        $('#status').text( '書き出し成功' );
    }

 }

// save.php
<?php 
 $folder = $_POST["フォルダ"];
 $fileName = $_POST["ファイル"];
 $data = $_POST["データ"];
 
 $file_name = "../" . $folder."/".$fileName;

 $json = fopen($file_name, 'w+b');
 fwrite($json, json_encode($data, JSON_UNESCAPED_UNICODE));
// JSON_UNESCAPED_UNICODE:マルチバイト文字をJSONにエンコードした場合エスケープされ文字化けに見えるのを避けるため
 fclose($json);
//書き出したjsonを読み込んで返す
 $json2 = file_get_contents($file_name);
 print $json2;

?>

     

CSS

HTML

   <p>上記で書き出したJSONを読み、表を作成する。</p>
   <button id="button4" class="ui-button ui-widget ui-corner-all">書き出したJSONから表を作成する</button>
   <br />
   <div id="tablej2"></div>
     

Javascript

$("#button4").click(function(event)
{
 var fname="json/hatsudenki2.json";
 console.log(fname);
 $.getJSON(fname,function(data)
 {
  console.table(data);
  var rt = makeTable("jquery-tablesorter-table3", data)
  console.log(rt);
  $("#tablej2").html(rt);
  //listSakusei(data, "#out3");
 });

});
     

CSS