csv形式の文字列をHTMLでテーブルに表示する方法

otaguro 439views 更新:2014年12月9日

PHPでFTP接続で取得したファイルを読み込む方法と組み合わせると、csvファイルを読み込んでテーブルに表示するようなことが出来ます。

<html>
<script language="JavaScript">
window.onload = function()
{
  var origin=document.getElementById('originTextarea').value.split(/\r?\n/g);

  var data;
  var row;
  var cell;
  for(var i=0;i<origin.length;i++){
    row=document.getElementById('targetTable').insertRow(-1);
    data = origin[i].split(",");

    for(var j=0;j<data.length;j++){
            cell=row.insertCell(-1);
              if(data[j]!=null){
                var value=data[j].substr(0,5).split("\"").join("");
                cell.innerHTML=value;
                if(value>90){cell.style.backgroundColor= "#00ffff";}
                else if(value>80){cell.style.backgroundColor= "#22ffff";}
                else if(value>70){cell.style.backgroundColor= "#99ffff";}
                else if(value>40){cell.style.backgroundColor= "#aaffff";}
                else if(value>20){cell.style.backgroundColor= "#ccffff";}
                else if(value>10){cell.style.backgroundColor= "#eeffff";}
                else {cell.style.backgroundColor= "#ffffff";}
              }
    }


  }

};


</script>

<textarea id="originTextarea">
0,10,20,30,40,50,60,70,80,90,100
100,90,80,70,60,50,40,30,20,10,0
</textarea>


<table id="targetTable">
</table>


</html>

(<と>は、<と>に直す必要があります)

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません