まだデータがありません。
ExcelのようにTableが編集できちゃう「Handsontable」
当ページのリンクには広告が含まれています。
スポンサーリンク
ExcelのようにTableが編集できちゃうjQueryプラグイン「Handsontable」を紹介します。
jQueryプラグイン「Handsontable」
jQueryプラグイン「Handsontable」は、HTMLのTableをページ遷移することなく動的に編集できるようにするプラグインです。
そう、まるでExcelのように。
これがなかなか使い勝手がいいんです。指定した要素が編集できちゃう「trocar.js」というプラグインもあるので合わせてご覧ください。
スポンサーリンク
デモでTableを編集してみてください。セルをダブルクリックするとセル内のテキストを編集でき、グリッドの右下ポインタをドラッグするとコピーまでできる優れもの。すげー。
ソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Handsontableのデモでーす。">
<title>Handsontable - jQuery Plugin Demo</title>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="css/jquery.handsontable.full.css">
</head>
<body>
<h1>Handsontableのデモでーす。</h1>
<div id="example1"></div>
<script>
$("#example1").handsontable({
startRows: 10,
startCols: 10,
rowHeaders: true,
colHeaders: true,
minSpareRows: 1,
fillHandle: true //possible values: true, false, "horizontal", "vertical"
});
var data = [
["バージョン", "コードネーム", "リリース", "パッケージ数"],
[1.1, "buzz", 1996, 474],
[1.2, "rex", 1996, 848],
[1.3, "bo", 1997, 974],
[2.0, "hamm", 1998, 1500],
[2.1, "slink", 1999, 2250],
[2.2, "potato", 2000, 3900],
[3.0, "woody", 2002, 8500],
[3.1, "sarge", 2005, 15400],
[4.0, "etch", 2007, 18000],
[5.0, "lenny", 2009, 28000],
[6.0, "squeeze", 2011, 29000],
[7.0, "wheezy", "2013予定", ""]
];
$("#example1").handsontable("loadData", data);
</script>
</body>
</html>
スポンサーリンク