TABLE \u3092 DIV \u3067\u56f2\u3093\u3067\u3001\u30d8\u30c3\u30c0\u30fc\u3092\u30b3\u30d4\u30fc\u3057\u3066\u5225\u306eDIV\u3067\u56f2\u307f\u3001\u6a2a\u30b9\u30af\u30ed\u30fc\u30eb\u3092\u540c\u671f\u3055\u305b\u308b <\/li>\n<\/ul>\n\u304f\u3089\u3044\u304b\u3002 <\/p>\n
;(function($){\r\n $.fn.lightable = function(options) {\r\n var cfg = $.extend({\r\n height:"100%",\r\n },options);\r\n \r\n var table, headerTable;\r\n var wrapper, headWrapper, bodyWrapper;\r\n \r\n \/**\r\n * \u51e6\u7406\u672c\u4f53\r\n *\/\r\n return this.each(function(){\r\n table = $(this);\r\n table.attr({cellspacing:"0", border:"0", cellpadding:"0" });\r\n \r\n headerTable = $(document.createElement("table"));\r\n headerTable.attr({cellspacing:"0", border:"0", cellpadding:"0" });\r\n \r\n headerTable.prepend($("thead", table).addClass("ui-widget-header").clone());\r\n $('thead tr',headerTable).append("<th><\/th>"); \/\/ for scrollbar\r\n \r\n \/\/ \u56fa\u5b9a\u30ec\u30a4\u30a2\u30a6\u30c8\u30a2\u30eb\u30b4\u30ea\u30ba\u30e0\u3092\u5229\u7528\u3059\u308b\u3088\u3046\u306b\u5c5e\u6027\u3092\u8a2d\u5b9a(table-layout=fixed \u304b\u3064 width\u30d7\u30ed\u30d1\u30c6\u30a3\u304c\u6307\u5b9a\u3055\u308c\u308b\u5fc5\u8981\u304c\u3042\u308b)\r\n var tattr = {"table-layout":"fixed", "width":"100%"};\r\n table.css(tattr);\r\n headerTable.css(tattr);\r\n \r\n if (cfg.cols) {\r\n var cg = new Array();\r\n $(cfg.cols).each(function(){\r\n cg.push("<col");\r\n if ("width" in this) {\r\n cg.push(" width='");\r\n cg.push(this.width);\r\n cg.push("'");\r\n }\r\n cg.push("\/>");\r\n });\r\n table.prepend(cg.join(""));\r\n \r\n \/\/ for scrollbar\r\n cg.push("<col width='18px'\/>");\r\n headerTable.prepend(cg.join(""));\r\n }\r\n \r\n \/\/ \u69cb\u9020\u3092\u4f5c\u6210\r\n table.wrapAll("<div class='lightable-wrapper' style='width:100%;'>"\r\n + "<div class='lightable-body-wrapper' style='overflow:auto;width:100%;"\r\n + "height:" + cfg.height + ";'><\/div><\/div>");\r\n\r\n wrapper = table.closest(".lightable-wrapper");\r\n wrapper.prepend("<div class='lighttable-head-wrapper' style='overflow:hidden;width:100%;height:100%;'><\/div>");\r\n \r\n headWrapper = $(".lighttable-head-wrapper", wrapper); \r\n bodyWrapper = table.closest(".lightable-body-wrapper");\r\n headWrapper.prepend(headerTable);\r\n \r\n $("thead" ,table).hide();\r\n \r\n bodyWrapper.scroll(function(){\r\n headWrapper.scrollLeft(this.scrollLeft);\r\n });\r\n });\r\n };\r\n})(jQuery);<\/pre>\nHTML (table_test.html)<\/h3>\n
\u3056\u3063\u304f\u308a\u3053\u3093\u306a\u611f\u3058\u3002<\/p>\n
$(\u30c6\u30fc\u30d6\u30eb).lightable(\u30d1\u30e9\u30e1\u30fc\u30bf); \u3067\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u9069\u7528<\/p>\n
\u3072\u3068\u3064\u9a5a\u3044\u305f\uff1f\u306e\u306f\u3001\u914d\u5217\u306e\u8981\u7d20\u306e\u6700\u5f8c\u306e\u30ab\u30f3\u30de\u304c\u3042\u308b\u304b\u7121\u3044\u304b\u3067\u3001IE \u3068Chrome \u3067jQuery.each() \u3067\u8fd4\u3055\u308c\u308b\u8981\u7d20\u6570\u304c\u7570\u306a\u308b\u3053\u3068\u3002<\/p>\n
\u3069\u3046\u3082\u3001[1,2,3,] \u3068\u3044\u3046\u69d8\u306a\u914d\u5217 \u306e\u5834\u5408\u3001IE \u3060\u3068\u3001\u6700\u5f8c\u306e\u30ab\u30f3\u30de\u306e\u5f8c\u306bnull \u304c\u3042\u308b\u3068\u5224\u65ad\u3057\u3066\u304b\u30014\u8981\u7d20\u51e6\u7406\u3055\u308c\u308b\u304c\u3001Chrome \u3060\u3068\u30013\u56de\u3057\u304b\u51e6\u7406\u3055\u308c\u306a\u3044\u69d8\u3060\u3002 <\/p>\n
<!DOCTYPE html>\r\n<head>\r\n<meta http-equiv="Content-Type" content="text\/html; charset=shift-jis">\r\n<link rel="stylesheet" type="text\/css" href=".\/jquery\/css\/custom-theme\/jquery-ui-1.8.14.custom.css" \/>\r\n<link rel="stylesheet" type="text\/css" href=".\/css\/lightable.css" \/>\r\n<style type="text\/css">\r\n.number {\r\n text-align:right;\r\n}\r\n<\/style>\r\n<title>Lightable Test<\/title>\r\n<\/head>\r\n<body>\r\n <table id="tbl_dummy" style="table-layout:fixed;width:100%;">\r\n <thead>\r\n <tr>\r\n <th>\u30ab\u30e9\u30e01<\/th>\r\n <th>\u30ab\u30e9\u30e02<\/th>\r\n <th>\u30ab\u30e9\u30e03<\/th>\r\n <th>\u30ab\u30e9\u30e04<\/th>\r\n <th>\u30ab\u30e9\u30e05<\/th>\r\n <th>\u30ab\u30e9\u30e06<\/th>\r\n <th>\u30ab\u30e9\u30e07<\/th>\r\n <th>\u30ab\u30e9\u30e08<\/th>\r\n <th>\u30ab\u30e9\u30e09<\/th>\r\n <th>\u30ab\u30e9\u30e010<\/th>\r\n <th>\u30ab\u30e9\u30e011<\/th>\r\n <th>\u30ab\u30e9\u30e012<\/th>\r\n <th>\u30ab\u30e9\u30e013<\/th>\r\n <th>\u30ab\u30e9\u30e014<\/th>\r\n <th>\u30ab\u30e9\u30e015<\/th>\r\n <th>\u30ab\u30e9\u30e016<\/th>\r\n <th>\u30ab\u30e9\u30e017<\/th>\r\n <th>\u30ab\u30e9\u30e018<\/th>\r\n <th>\u30ab\u30e9\u30e019<\/th>\r\n <th>\u30ab\u30e9\u30e020<\/th>\r\n <th>\u30ab\u30e9\u30e021<\/th>\r\n <th>\u30ab\u30e9\u30e022<\/th>\r\n <th>\u30ab\u30e9\u30e023<\/th>\r\n <th>\u30ab\u30e9\u30e024<\/th>\r\n <th>\u30ab\u30e9\u30e025<\/th>\r\n <th>\u30ab\u30e9\u30e026<\/th>\r\n <th>\u30ab\u30e9\u30e027<\/th>\r\n <th>\u30ab\u30e9\u30e028<\/th>\r\n <th>\u30ab\u30e9\u30e029<\/th>\r\n <th>\u30ab\u30e9\u30e030<\/th>\r\n <th>\u30ab\u30e9\u30e031<\/th>\r\n <th>\u30ab\u30e9\u30e032<\/th>\r\n <th>\u30ab\u30e9\u30e033<\/th>\r\n <th>\u30ab\u30e9\u30e034<\/th>\r\n <th>\u30ab\u30e9\u30e035<\/th>\r\n <th>\u30ab\u30e9\u30e036<\/th>\r\n <th>\u30ab\u30e9\u30e037<\/th>\r\n <th>\u30ab\u30e9\u30e038<\/th>\r\n <th>\u30ab\u30e9\u30e039<\/th>\r\n <th>\u30ab\u30e9\u30e040<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <\/tbody>\r\n <\/table>\r\n\r\n\r\n <script type="text\/javascript" src=".\/jquery\/js\/jquery-1.6.1.js"><\/script>\r\n <script type="text\/javascript" src=".\/jquery-ui\/js\/jquery-ui-1.8.14.custom.min.js"><\/script>\r\n <script type="text\/javascript" src=".\/js\/jquery.lightable.js"><\/script>\r\n <script type="text\/javascript" src=".\/dat.js"><\/script>\r\n <script type="text\/javascript">\r\n $(function(){\r\n \r\n $("#tbl_dummy").lightable({\r\n cols:[\r\n {width:100,align:"right"},\r\n {width:200},\r\n {width:300},\r\n {width:100},\r\n {width:200},\r\n {width:300},\r\n {width:100},\r\n {width:200},\r\n {width:300},\r\n {width:100},\r\n {width:200},\r\n {width:300},\r\n {width:100},\r\n {width:200},\r\n {width:300},\r\n {width:100},\r\n {width:200},\r\n {width:300},\r\n {width:100},\r\n {width:200},\r\n {width:300},\r\n {width:100},\r\n {width:200},\r\n {width:300},\r\n {width:100},\r\n {width:200},\r\n {width:300},\r\n {width:100},\r\n {width:200},\r\n {width:300},\r\n {width:100},\r\n {width:200},\r\n {width:300},\r\n {width:100},\r\n {width:200},\r\n {width:300},\r\n {width:100},\r\n {width:200},\r\n {width:300},\r\n {width:100}\r\n ] ,\r\n height:"500px",\r\n }); \r\n loadDummyData(); \r\n }); \r\n function loadDummyData() {\r\n var rows = getData();\r\n var tb = $("#tbl_dummy");\r\n var rb = null;\r\n rb = new Array();\r\n for (var i=0; i<rows.length; i++) {\r\n var cells = rows[i];\r\n \r\n rb.push("<tr>");\r\n for (var j=0; j<cells.length; j++) {\r\n rb.push("<td class='number'>");\r\n rb.push(cells[j]);\r\n rb.push("<\/td>");\r\n }\r\n rb.push("<\/tr>");\r\n }\r\n \r\n tb.append(rb.join(""));\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\/pre><\/p><\/pre>\n
CSS (lightable.css)<\/h3>\n
CSS\u306f\u3053\u3093\u306a\u611f\u3058\u3002<\/p>\n
div.lightable-wrapper {\r\n\tborder: 1px solid #DDD;\r\n}\r\ndiv.lightable-wrapper th {\r\n\tborder-width: 0 1px 1px 0;\r\n\tborder-style: solid;\r\n\tborder-color: #DDD;\r\n\tbackground: none;\r\n\tfont-weight: normal;\r\n\tpadding: 5px;\r\n}\r\ndiv.lightable-wrapper td {\r\n\tpadding: 5px;\r\n\tborder-width: 0 1px 1px 0;\r\n\tborder-style: solid;\r\n\tborder-color: #DDD;\r\n\tbackground: none;\r\n}<\/pre>\n\u30c6\u30b9\u30c8\u30c7\u30fc\u30bf\u4f5c\u6210 (dat.js)<\/h3>\n
\u9069\u5f53\u306b\u30c6\u30b9\u30c8\u30c7\u30fc\u30bf\u306e\u914d\u5217\u3092\u3064\u304f\u308b\u3002<\/p>\n
function getData() {\r\n var rows = [];\r\n for (var i=0; i<200; i++) {\r\n var row = []; \r\n row.push(i + 1);\r\n row.push("\u30c6\u30b9\u30c8\u30c7\u30fc\u30bf \u30c6\u30b9\u30c8\u30c7\u30fc\u30bf 2");\r\n row.push("\u30c6\u30b9\u30c8\u30c7\u30fc\u30bf \u30c6\u30b9\u30c8\u30c7\u30fc\u30bf \u30c6\u30b9\u30c8\u30c7\u30fc\u30bf 3");\r\n row.push("\u30c6\u30b9\u30c8\u30c7\u30fc\u30bf 4");\r\n row.push("\u30c6\u30b9\u30c8\u30c7\u30fc\u30bf \u30c6\u30b9\u30c8\u30c7\u30fc\u30bf 5");\r\n row.push("\u30c6\u30b9\u30c8\u30c7\u30fc\u30bf \u30c6\u30b9\u30c8\u30c7\u30fc\u30bf \u30c6\u30b9\u30c8\u30c7\u30fc\u30bf 6");\r\n row.push("\u30c6\u30b9\u30c8\u30c7\u30fc\u30bf 7");\r\n row.push("\u30c6\u30b9\u30c8\u30c7\u30fc\u30bf \u30c6\u30b9\u30c8\u30c7\u30fc\u30bf 8");\r\n row.push("\u30c6\u30b9\u30c8\u30c7\u30fc\u30bf \u30c6\u30b9\u30c8\u30c7\u30fc\u30bf \u30c6\u30b9\u30c8\u30c7\u30fc\u30bf 9");\r\n row.push("\u30c6\u30b9\u30c8\u30c7\u30fc\u30bf 10");\r\n :\r\n \u7565 \r\n :\r\n rows.push(row);\r\n }\r\n return rows;\r\n} <\/pre>\n\u3093\u30fc\u666e\u901a\u306b\u3001\u65e2\u306b\u3042\u308b\u30d7\u30e9\u30b0\u30a4\u30f3\u304c\u52d5\u3044\u3066\u304f\u308c\u308c\u3070\u5e78\u305b\u306a\u3093\u3060\u3051\u3069\u306a\u30fc<\/p>\n
\u9762\u5012\u304f\u3055\u3044\u3051\u3069\u3001\u3053\u308c\u3092\u30d9\u30fc\u30b9\u306b\u4f5c\u308a\u8fbc\u3093\u3067\u3044\u304f\u3057\u304b\u306a\u3044\u304b\u306a\u30fc<\/p>\n","protected":false},"excerpt":{"rendered":"
jQuery \u306e\u30c6\u30fc\u30d6\u30eb\u7528\u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u3092\u5229\u7528\u3057\u3066\u30b7\u30b9\u30c6\u30e0\u958b\u767a\u306b\u5229\u7528\u3059\u308b\u3053\u3068\u3092\u60f3\u5b9a\u3057\u3066\u3044\u305f\u306e\u3060\u304c\u3001\u753b\u9762\u306e\u63cf\u753b\u3001\u304a\u3088\u3073\u30b9\u30af\u30ed\u30fc\u30eb\u3057\u305f\u3068\u304d\u306e\u53cd\u5fdc\u304c\u4f7f\u7528\u306b\u8010\u3048\u306a\u3044\u304f\u3089\u3044\u9045\u3059\u304e\u308b\u3002 \u307e\u3041\u3001\u4eca\u56de\u884c\u3063\u3066\u3044\u308b\u306e\u306f\u3001\u5217\u304c\u6570\u5341\u3042\u308b\u3088\u3046\u306a\u30c6\u30fc […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"sns_share_botton_hide":"","vkExUnit_sns_title":"","_vk_print_noindex":"","sitemap_hide":"","_veu_custom_css":"","veu_display_promotion_alert":"","vkexunit_cta_each_option":"","footnotes":""},"categories":[26],"tags":[],"class_list":["post-303","post","type-post","status-publish","format-standard","hentry","category-jquery"],"veu_head_title_object":{"title":"","add_site_title":""},"_links":{"self":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/posts\/303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=303"}],"version-history":[{"count":0,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/posts\/303\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=303"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.typea.info\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\u306b\u3001\u4e01\u5be7\u306b\u89e3\u8aac\u3057\u3066\u304f\u308c\u3066\u3044\u308b\u3002\u4e71\u66b4\u306b\u624b\u9806\u3092\u66f8\u304f\u3068\u3001\u4ee5\u4e0b\u306e\u611f\u3058\u304b\u3002<\/p>\n
<\/a>
\u300d\u306b\u3042\u308a\u3001\u56fa\u5b9a\u30ec\u30a4\u30a2\u30a6\u30c8\u30a2\u30eb\u30b4\u30ea\u30ba\u30e0\u304c\u63a1\u7528\u3055\u308c\u308b\u305f\u3081\u306b\u306f\u3001<\/p>\n
<\/a>
![\"lightable01\"](\"https:\/\/www.typea.info\/blog\/wp-content\/uploads\/image\/jQueryIE_AF4\/lightable01_thumb.jpg\" "\\"lightable01\\"")
<\/a> <\/p>\n\u300d\u306f\u975e\u5e38\u306b\u308f\u304b\u308a\u3084\u3059\u304f\u3066\u3001\u826f\u66f8\u3002\u53c2\u8003\u306b\u3055\u305b\u3066\u3044\u305f\u3060\u304d\u306a\u304c\u3089\u3001\u3001\u3001<\/p>\n
![](\"http:\/\/ws.assoc-amazon.jp\/widgets\/q?_encoding=UTF8&Format=_SL110_&ASIN=4844329618&MarketPlace=JP&ID=AsinImage&WS=1&tag=typea09-22&ServiceVersion=20070822\")
<\/a>