bingo

The way to my programmer


1.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>new document</title>
  5. <script type="text/javascript"
  6. src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  7. <script type="text/javascript">
  8. function FixTable(TableID, FixColumnNumber, width, height) {
  9. if ($("#" + TableID + "_tableLayout").length != 0) {
  10. $("#" + TableID + "_tableLayout").before($("#" + TableID));
  11. $("#" + TableID + "_tableLayout").empty();
  12. }
  13. else {
  14. $("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
  15. }
  16. $('<div id="' + TableID + '_tableFix"></div>'
  17. + '<div id="' + TableID + '_tableHead"></div>'
  18. + '<div id="' + TableID + '_tableColumn"></div>'
  19. + '<div id="' + TableID + '_tableData"></div>').appendTo("#" + TableID + "_tableLayout");
  20. var oldtable = $("#" + TableID);
  21. var tableFixClone = oldtable.clone(true);
  22. tableFixClone.attr("id", TableID + "_tableFixClone");
  23. $("#" + TableID + "_tableFix").append(tableFixClone);
  24. var tableHeadClone = oldtable.clone(true);
  25. tableHeadClone.attr("id", TableID + "_tableHeadClone");
  26. $("#" + TableID + "_tableHead").append(tableHeadClone);
  27. var tableColumnClone = oldtable.clone(true);
  28. tableColumnClone.attr("id", TableID + "_tableColumnClone");
  29. $("#" + TableID + "_tableColumn").append(tableColumnClone);
  30. $("#" + TableID + "_tableData").append(oldtable);
  31. $("#" + TableID + "_tableLayout table").each(function () {
  32. $(this).css("margin", "0");
  33. });
  34. var HeadHeight = $("#" + TableID + "_tableHead thead").height();
  35. HeadHeight += 2;
  36. $("#" + TableID + "_tableHead").css("height", HeadHeight);
  37. $("#" + TableID + "_tableFix").css("height", HeadHeight);
  38. var ColumnsWidth = 0;
  39. var ColumnsNumber = 0;
  40. $("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
  41. ColumnsWidth += $(this).outerWidth(true);
  42. ColumnsNumber++;
  43. });
  44. ColumnsWidth += 2;
  45. if ($.browser.msie) {
  46. switch ($.browser.version) {
  47. case "7.0":
  48. if (ColumnsNumber >= 3) ColumnsWidth--;
  49. break;
  50. case "8.0":
  51. if (ColumnsNumber >= 2) ColumnsWidth--;
  52. break;
  53. }
  54. }
  55. $("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
  56. $("#" + TableID + "_tableFix").css("width", ColumnsWidth);
  57. $("#" + TableID + "_tableData").scroll(function () {
  58. $("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
  59. $("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
  60. });
  61. $("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
  62. $("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
  63. $("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
  64. $("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
  65. if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
  66. $("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
  67. $("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
  68. }
  69. if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
  70. $("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
  71. $("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
  72. }
  73. $("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
  74. $("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
  75. $("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
  76. $("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
  77. }
  78. $(document).ready(function () {
  79. FixTable("MyTable", 2, 800, 400);
  80. });
  81. //-->
  82. </script>
  83. </head>
  84. <body>
  85. <table
  86. style="border-bottom-color: black; border-top-color: black; width: 1000px; color: #000000; border-right-color: black; font-size: medium; border-left- color: black"
  87. id="MyTable" border="1" cellspacing="0" cellpadding="0">
  88. <thead>
  89. <tr>
  90. <th style="text-align: center; width: 80px" >姓名</th>
  91. <th style="text-align: center; width: 80px" >班级</th>
  92. <th style="text-align: center; width: 80px">语文</th>
  93. <th style="text-align: center; width: 80px">数学</th>
  94. <th style="text-align: center; width: 80px">英语</th>
  95. <th style="text-align: center; width: 80px">政治</th>
  96. <th style="text-align: center; width: 80px">历史</th>
  97. <th style="text-align: center; width: 80px">地理</th>
  98. <th style="text-align: center; width: 80px">物理</th>
  99. <th style="text-align: center; width: 80px">化学</th>
  100. <th style="text-align: center; width: 80px">生物</th>
  101. <th style="text-align: center; width: 80px">生物</th>
  102. </tr>
  103. </thead>
  104. <tbody>
  105. <!-- 数据行 -->
  106. <tr>
  107. <td>学生3asfasfdasfsdaf2</td>
  108. <td>班级1</td>
  109. <td>29safafafasfasdf</td>
  110. <td>25</td>
  111. <td>146</td>
  112. <td>28</td>
  113. <td>79</td>
  114. <td>73</td>
  115. <td>47</td>
  116. <td>8</td>
  117. <td>91</td>
  118. <td>526</td>
  119. </tr>
  120. <tr>
  121. <td>学生32</td>
  122. <td>班级1</td>
  123. <td>29</td>
  124. <td>25</td>
  125. <td>146</td>
  126. <td>28</td>
  127. <td>79</td>
  128. <td>73</td>
  129. <td>47</td>
  130. <td>8</td>
  131. <td>91</td>
  132. <td>526</td>
  133. </tr>
  134. <tr>
  135. <td>学生32</td>
  136. <td>班级1</td>
  137. <td>29</td>
  138. <td>25</td>
  139. <td>146</td>
  140. <td>28</td>
  141. <td>79</td>
  142. <td>73</td>
  143. <td>47</td>
  144. <td>8</td>
  145. <td>91</td>
  146. <td>526</td>
  147. </tr>
  148. <tr>
  149. <td>学生32</td>
  150. <td>班级1</td>
  151. <td>29</td>
  152. <td>25</td>
  153. <td>146</td>
  154. <td>28</td>
  155. <td>79</td>
  156. <td>73</td>
  157. <td>47</td>
  158. <td>8</td>
  159. <td>91</td>
  160. <td>526</td>
  161. </tr>
  162. <tr>
  163. <td>学生32</td>
  164. <td>班级1</td>
  165. <td>29</td>
  166. <td>25</td>
  167. <td>146</td>
  168. <td>28</td>
  169. <td>79</td>
  170. <td>73</td>
  171. <td>47</td>
  172. <td>8</td>
  173. <td>91</td>
  174. <td>526</td>
  175. </tr>
  176. <tr>
  177. <td>学生32</td>
  178. <td>班级1</td>
  179. <td>29</td>
  180. <td>25</td>
  181. <td>146</td>
  182. <td>28</td>
  183. <td>79</td>
  184. <td>73</td>
  185. <td>47</td>
  186. <td>8</td>
  187. <td>91</td>
  188. <td>526</td>
  189. </tr>
  190. <tr>
  191. <td>学生32</td>
  192. <td>班级1</td>
  193. <td>29</td>
  194. <td>25</td>
  195. <td>146</td>
  196. <td>28</td>
  197. <td>79</td>
  198. <td>73</td>
  199. <td>47</td>
  200. <td>8</td>
  201. <td>91</td>
  202. <td>526</td>
  203. </tr>
  204. <tr>
  205. <td>学生32</td>
  206. <td>班级1</td>
  207. <td>29</td>
  208. <td>25</td>
  209. <td>146</td>
  210. <td>28</td>
  211. <td>79</td>
  212. <td>73</td>
  213. <td>47</td>
  214. <td>8</td>
  215. <td>91</td>
  216. <td>526</td>
  217. </tr>
  218. <tr>
  219. <td>学生32</td>
  220. <td>班级1</td>
  221. <td>29</td>
  222. <td>25</td>
  223. <td>146</td>
  224. <td>28</td>
  225. <td>79</td>
  226. <td>73</td>
  227. <td>47</td>
  228. <td>8</td>
  229. <td>91</td>
  230. <td>526</td>
  231. </tr>
  232. <tr>
  233. <td>学生32</td>
  234. <td>班级1</td>
  235. <td>29</td>
  236. <td>25</td>
  237. <td>146</td>
  238. <td>28</td>
  239. <td>79</td>
  240. <td>73</td>
  241. <td>47</td>
  242. <td>8</td>
  243. <td>91</td>
  244. <td>526</td>
  245. </tr>
  246. <tr>
  247. <td>学生32</td>
  248. <td>班级1</td>
  249. <td>29</td>
  250. <td>25</td>
  251. <td>146</td>
  252. <td>28</td>
  253. <td>79</td>
  254. <td>73</td>
  255. <td>47</td>
  256. <td>8</td>
  257. <td>91</td>
  258. <td>526</td>
  259. </tr>
  260. <tr>
  261. <td>学生32</td>
  262. <td>班级1</td>
  263. <td>29</td>
  264. <td>25</td>
  265. <td>146</td>
  266. <td>28</td>
  267. <td>79</td>
  268. <td>73</td>
  269. <td>47</td>
  270. <td>8</td>
  271. <td>91</td>
  272. <td>526</td>
  273. </tr>
  274. <tr>
  275. <td>学生32</td>
  276. <td>班级1</td>
  277. <td>29</td>
  278. <td>25</td>
  279. <td>146</td>
  280. <td>28</td>
  281. <td>79</td>
  282. <td>73</td>
  283. <td>47</td>
  284. <td>8</td>
  285. <td>91</td>
  286. <td>526</td>
  287. </tr>
  288. <tr>
  289. <td>学生32</td>
  290. <td>班级1</td>
  291. <td>29</td>
  292. <td>25</td>
  293. <td>146</td>
  294. <td>28</td>
  295. <td>79</td>
  296. <td>73</td>
  297. <td>47</td>
  298. <td>8</td>
  299. <td>91</td>
  300. <td>526</td>
  301. </tr>
  302. <tr>
  303. <td>学生32</td>
  304. <td>班级1</td>
  305. <td>29</td>
  306. <td>25</td>
  307. <td>146</td>
  308. <td>28</td>
  309. <td>79</td>
  310. <td>73</td>
  311. <td>47</td>
  312. <td>8</td>
  313. <td>91</td>
  314. <td>526</td>
  315. </tr>
  316. <tr>
  317. <td>学生32</td>
  318. <td>班级1</td>
  319. <td>29</td>
  320. <td>25</td>
  321. <td>146</td>
  322. <td>28</td>
  323. <td>79</td>
  324. <td>73</td>
  325. <td>47</td>
  326. <td>8</td>
  327. <td>91</td>
  328. <td>526</td>
  329. </tr>
  330. </tbody>
  331. </table>
  332. </body>
  333. </html>

2.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="author" content="jack">
  7. <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,
  8. user-scalable=no" />
  9. <!-- 适应手机屏幕,防止屏幕缩放 -->
  10. <!--样式-->
  11. <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
  12. </head>
  13. <body>
  14. <title>固定表头和首列的表格</title>
  15. <style type="text/css">
  16. #left_div{
  17. width:100px;
  18. float: left;
  19. }
  20. #left_div1{
  21. width: 100%;
  22. }
  23. #left_div2{
  24. margin-top:-20px;
  25. width: 100%;
  26. height: 400px;
  27. overflow: hidden;
  28. }
  29. #left_table1 th{
  30. background: #E9F8FF;
  31. text-align:center;
  32. }
  33. #left_table2 th{
  34. text-align:center;
  35. }
  36. #right_div{
  37. float: left;
  38. }
  39. #right_div1{
  40. width: 100%;
  41. overflow: hidden;
  42. }
  43. #right_divx{
  44. width: 900px;
  45. }
  46. #right_div2{
  47. margin-top:-20px;
  48. width:100%;
  49. height:400px;
  50. overflow: auto;
  51. }
  52. #right_table1{
  53. width: 880px;
  54. }
  55. #right_table2{
  56. /**width和max-width一起写,手机浏览器打开也能固定长度**/
  57. width: 880px;
  58. max-width: 880px;
  59. white-space:nowrap;
  60. }
  61. #right_table1 th{
  62. background: #E9F8FF;
  63. text-align:center;
  64. width:10%;
  65. }
  66. #right_table2 td{
  67. width:10%;
  68. text-align:center;
  69. }
  70. </style>
  71. <div class="container-fluid">
  72. <div id="left_div">
  73. <div id="left_div1">
  74. <table id="left_table1" class="table table-bordered">
  75. <tr>
  76. <th>我不会动</th>
  77. </tr>
  78. </table>
  79. </div>
  80. <div id="left_div2">
  81. <table id="left_table2" class="table table-bordered">
  82. </table>
  83. </div>
  84. </div>
  85. <div id="right_div">
  86. <div id="right_div1">
  87. <div id="right_divx">
  88. <table id="right_table1" class="table table-bordered">
  89. <tr>
  90. <th>我是表头</th>
  91. <th>我是表头</th>
  92. <th>我是表头</th>
  93. <th>我是表头</th>
  94. <th>我是表头</th>
  95. <th>我是表头</th>
  96. <th>我是表头</th>
  97. <th>我是表头</th>
  98. <th>我是表头</th>
  99. <th>我是表头</th>
  100. </tr>
  101. </table>
  102. </div>
  103. </div>
  104. <div id="right_div2">
  105. <table id="right_table2" class="table table-bordered">
  106. </table>
  107. </div>
  108. </div>
  109. </div>
  110. <!--脚本-->
  111. <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  112. <script src="./bootstrap.min.js" type="text/javascript"></script>
  113. <script type="text/javascript">
  114. //固定和滚动
  115. var right_div2 = document.getElementById("right_div2");
  116. right_div2.onscroll = function(){
  117. var right_div2_top = this.scrollTop;
  118. var right_div2_left = this.scrollLeft;
  119. document.getElementById("left_div2").scrollTop = right_div2_top;
  120. document.getElementById("right_div1").scrollLeft = right_div2_left;
  121. }
  122. //设置右边div宽度
  123. document.getElementById("right_div").style.width=""+document.documentElement.clientWidth-130+"px";
  124. setInterval(function() {
  125. document.getElementById("right_div").style.width=""+document.documentElement.clientWidth-130+"px";
  126. }, 0);
  127. for(var i=0;i<24;i++){
  128. $("#left_table2").append("<tr><th>我是首列</th></tr>");
  129. $("#right_table2").append("<tr><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td><td>"+i+"</td></tr>");
  130. }
  131. </script>
  132. </body>
  133. </html>

3.
[转]http://blog.csdn.net/oukunqing/article/details/43386713

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>无标题页</title>
  6. <meta name="description" content="" />
  7. <meta name="keywords" content="" />
  8. <style type="text/css">
  9. body{font-size:12px;}
  10. table{border:solid 1px #ccc; border-collapse:collapse;}
  11. table td,table th{border:solid 1px #ccc; line-height:22px; height:22px; padding:0;}
  12. #tbheader td{background:#fff;}
  13. </style>
  14. <script type="text/javascript" >
  15. var ofixed_table_st = window.setTimeout;
  16. window.setTimeout = function(fRef, mDelay) {
  17. if (typeof fRef == 'function') {
  18. var argu = Array.prototype.slice.call(arguments, 2);
  19. var f = (function() {
  20. fRef.apply(null, argu);
  21. });
  22. return ofixed_table_st(f, mDelay);
  23. }
  24. return ofixed_table_st(fRef, mDelay);
  25. };
  26. function oFixedTable(id, obj, _cfg){
  27. this.id = id;
  28. this.obj = obj;
  29. this.box = this.obj.parentNode;
  30. this.config = {
  31. fixHead: _cfg.fixHead || true,
  32. rows: _cfg.rows || 1,
  33. cols: _cfg.cols || 0,
  34. background: _cfg.background || '#f1f1f1',
  35. zindex: _cfg.zindex || 9999
  36. };
  37. window.setTimeout(this._fixTable, 100, this);
  38. }
  39. oFixedTable.prototype._fixTable = function(_){
  40. if(_.obj.rows.length <= 0){
  41. return false;
  42. }
  43. var hasLeft = _.buildLeft();
  44. var hasHead = _.buildHead();
  45. _.box.onscroll = function(){
  46. if(_.divHead != null){
  47. _.divHead.scrollLeft = this.scrollLeft;
  48. }
  49. if(_.divLeft != null){
  50. _.divLeft.scrollTop = this.scrollTop;
  51. }
  52. };
  53. if(hasHead && hasLeft){
  54. _.buildTopLeft();
  55. }
  56. };
  57. oFixedTable.prototype.buildHead = function(){
  58. var _ = this;
  59. var strDivId = _.id + '_div_head';
  60. var strTbId = _.id + '_tb_header';
  61. var div = document.createElement('div');
  62. div.id = strDivId;
  63. div.style.cssText = 'position:absolute;overflow:hidden;z-index:' + (_.config.zindex + 1) + ';';
  64. div.innerHTML = '<table id="' + strTbId + '" cellpadding="0" cellspacing="0" style="background:' + _.config.background + ';"></table>';
  65. _.box.insertBefore(div, _.obj);
  66. _.divHead = div;
  67. _.tbHead = document.getElementById(strTbId);
  68. //判断是否出现纵向滚动条,若出现,高度减去滚动条宽度 16px
  69. var sw = _.obj.offsetHeight > _.box.offsetHeight ? 16 : 0;
  70. _.divHead.style.width = (_.box.offsetWidth - sw) + 'px';
  71. _.tbHead.style.textAlign = _.obj.style.textAlign;
  72. _.tbHead.style.width = _.obj.offsetWidth + 'px';
  73. var hasHead = false;
  74. if(_.config.fixHead && _.obj.tHead != null){
  75. var tHead = _.obj.tHead;
  76. _.tbHead.appendChild(tHead.cloneNode(true));
  77. hasHead = true;
  78. } else {
  79. for(var i=0; i<_.config.rows; i++){
  80. var row = _.obj.rows[i];
  81. if(row != null){
  82. _.tbHead.appendChild(row.cloneNode(true));
  83. hasHead = true;
  84. }
  85. }
  86. }
  87. return hasHead;
  88. };
  89. oFixedTable.prototype.buildLeft = function(){
  90. var _ = this;
  91. if(_.config.cols <= 0){
  92. return false;
  93. }
  94. var strDivId = _.id + '_div_left';
  95. var strTbId = _.id + '_tb_left';
  96. var div = document.createElement('div');
  97. div.id = strDivId;
  98. div.style.cssText = 'position:absolute;overflow:hidden;z-index:' + _.config.zindex + ';';
  99. div.innerHTML = '<table id="' + strTbId + '" cellpadding="0" cellspacing="0" style="background:' + _.config.background + ';"></table>';
  100. _.box.insertBefore(div, _.obj);
  101. _.divLeft = div;
  102. _.tbLeft = document.getElementById(strTbId);
  103. _.tbLeft.style.textAlign = _.obj.style.textAlign;
  104. //判断是否出现横向滚动条,若出现,高度减去滚动条高度 16px
  105. var sw = _.obj.offsetWidth > _.box.offsetWidth ? 16 : 0;
  106. _.divLeft.style.height = (_.box.offsetHeight - sw) + 'px';
  107. var hasLeft = false;
  108. for(var i=0,rows=_.obj.rows.length; i<rows; i++){
  109. var row = _.tbLeft.insertRow(_.tbLeft.rows.length);
  110. row.style.cssText = _.obj.rows[i].style.cssText;
  111. for(j=0; j<_.config.cols; j++){
  112. var cell = _.obj.rows[i].cells[j];
  113. if(cell != null){
  114. row.appendChild(cell.cloneNode(true));
  115. cell.style.cssText = _.obj.rows[i].cells[j].style.cssText;
  116. hasLeft = true;
  117. }
  118. }
  119. }
  120. return hasLeft;
  121. };
  122. oFixedTable.prototype.buildTopLeft = function(){
  123. var _ = this;
  124. var strDivId = _.id + '_div_top_left';
  125. var strTbId = _.id + '_tb_top_left';
  126. var div = document.createElement('div');
  127. div.id = strDivId;
  128. div.style.cssText = 'position:absolute;overflow:hidden;z-index:' + (_.config.zindex + 2) + ';';
  129. div.innerHTML = '<table id="' + strTbId + '" cellpadding="0" cellspacing="0" style="background:' + _.config.background + ';"></table>';
  130. _.box.insertBefore(div, _.obj);
  131. var tbTopLeft = document.getElementById(strTbId);
  132. tbTopLeft.style.textAlign = _.obj.style.textAlign;
  133. for(var i=0; i<_.config.rows; i++){
  134. var row = tbTopLeft.insertRow(tbTopLeft.rows.length);
  135. row.style.cssText = _.obj.rows[i].style.cssText;
  136. for(j=0; j<_.config.cols; j++){
  137. var cell = _.obj.rows[i].cells[j];
  138. if(cell != null){
  139. row.appendChild(cell.cloneNode(true));
  140. cell.style.cssText = _.obj.rows[i].cells[j].style.cssText;
  141. hasLeft = true;
  142. }
  143. }
  144. }
  145. };
  146. </script>
  147. </head>
  148. <body>
  149. 固定表头、固定左边单元格 示例:
  150. <br />
  151. <div id="divBox1" style="margin:20px 50px;overflow:auto;height:520px;width:450px;float:left;"></div>
  152. </body>
  153. <div id="divBox2" style="margin:20px 50px;overflow:auto;height:520px;width:450px;float:left;"></div>
  154. </body>
  155. </html>
  156. <script type="text/javascript">
  157. function test(num){
  158. var box = document.getElementById('divBox' + num);
  159. var strHtml = '<table id="tbTest' + num + '" cellpadding="0" cellspacing="0" style="text-align:center;width:680px;">';
  160. for(var i=0; i<1; i++){
  161. strHtml += '<tr style="background:url(title_bg.png) repeat-x;">';
  162. for(var j=0; j<8; j++){
  163. if(j < 8-1){
  164. strHtml += '<th style="width:80px;">';
  165. } else {
  166. strHtml += '<th>';
  167. }
  168. strHtml += '第' + (i+1) + '行第' + (j+1) + '列';
  169. strHtml += '</th>';
  170. }
  171. strHtml += '</tr>';
  172. }
  173. for(var i=1; i<30; i++){
  174. strHtml += '<tr>';
  175. for(var j=0; j<8; j++){
  176. if(j < 8-1){
  177. strHtml += '<td style="width:80px;">';
  178. } else {
  179. strHtml += '<td>';
  180. }
  181. strHtml += '第' + (i+1) + '行第' + (j+1) + '列';
  182. strHtml += '</td>';
  183. }
  184. strHtml += '</tr>';
  185. }
  186. strHtml += '</table>';
  187. box.innerHTML = strHtml;
  188. }
  189. test(1);
  190. test(2);
  191. //调用固定表头类
  192. var ofix1 = new oFixedTable('ofix1', document.getElementById('tbTest1'), {rows:1, cols:1});
  193. var ofix2 = new oFixedTable('ofix2', document.getElementById('tbTest2'), {rows:2, cols:1});
  194. </script>

4.

http://www.miniui.com/demo/index.html#src=datagrid/fixedcolumns.html


注:以上内容均来自网络。用过之后没记录原地址,见谅。



postgresql 给用户授权问题 springboot pageHelper 分页异常