jqueryでエクセル風の入力画面を作る

javascript

すごい簡単なんだけど、必要だったのでデモつくってみた
とりあえずできることは...たいしてないのだけど


矢印キーで移動できるくらいなんだけど、管理画面とかからいちいちマウスでフォーカスあてて更新とかが手間とのことなので
これをカスタマイズしていけたらなぁと


いろいろライブラリあるけど、業務とかで実用化するとなるとカスタマイズしてゴリゴリコード書いていく事になるのかと思ってとりあえず作ってみた形です

http://www25.atpages.jp/~kimagureneet/example/table/
↑デモページ

<!DOCTYPE html>
<head>
  <title></title>
  <meta charset="UTF-8">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="./jquery.table.js"></script>
  <link rel="stylesheet" href="./jquery.table.css">
</head>
<body>
<script>
$(function(){
    $("#table").table(
    {
        header : ["NO","氏名","国語","算数","理科","社会"],
        data : [[1,"山田太郎",80,82,84,86,88],
                  [2,"鈴木次郎",80,82,84,86,88]]
    });
});
</script>
  <h2>test</h2>
  <div id="table"></div>
</body>
</html>

//jquery.table.js
//params int rows 行数
//params array header 表ヘッダー
//params array data 初期データ
$(function(){

    $.fn.table = function(options){
	
	var opts = $.extend({},$.fn.table.defaults,options);
	var table = $("<table>");
	var tr = $("<tr>");
	$.each(opts.header,function(){
	    tr.append("<th>"+this+"</th>");
	});
	table.append($("<thead>").append(tr));

	var tbody = $("<tbody>");
	for(var y=0;y<opts.rows;y++){
	    var tr = $("<tr>");
	    for(var x=0;x<opts.header.length;x++){
		tbody.append(tr.append($("<td>").append(
		    $("<input type=\"text\" id=\"" + x + "-" + y + "\">")))
		);
	    }
	}
	table.append(tbody);
	$(this).append(table);

	$.each(opts.data,function(y,v){
	    $.each(v,function(x,v2){
		$("#" + x + "-" + y).val(v2);
	    });
	});
	var fx=0;fy=0;
	$("#"+fx+"-"+fy).focus();
	
	$(this).keydown(function(e){
	    if(e.keyCode == 37) fx--;
	    else if(e.keyCode == 38) fy--;
	    else if(e.keyCode == 39) fx++;
	    else if(e.keyCode == 40) fy++;
	    else return;

	    if(fx<0) fx=0;
	    if(fy<0) fy=0;
	    if(fx>opts.header.length-1) fx=opts.header.length-1;
	    if(fy>opts.rows-1) fy=opts.rows-1;
	    
	    $("#"+fx+"-"+fy).focus();
	});
    }

    $.fn.table.defaults = {
	rows : 10
    };
    
});  

//jquery.table.css
//デザインはこれをカスタマイズしてください！
table tbody tr td input{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    border:none;
    font-size:100%;
}
table tbody tr td input:focus{
    background-color: #E6E6FA;
}
table
,table thead tr th
,table tbody tr td{
    border:1px #999 solid;
}
table{
    border-collapse:collapse;
}