½ÃÀÛÆäÀÌÁö·Î Áñ°Üã±âÃß°¡
·Î±×ÀÎ
ȸ¿ø°¡ÀÔ l Ã⼮üũ l ¸¶ÀÌÆäÀÌÁö l CGIMALL
happycgi
ÀÚ·á½Ç »çÀÌÆ®µî·Ï ·©Å·100 ÇÁ·Î±×·¥¸®ºä °ü¸®ÀÚÃßõÀÚ·á Ãʺ¸°¡À̵å
Ä¿¹Â´ÏƼ
Àüü ÆîÃ帱â
Äü¸Þ´º¸µÅ© jquery , CSS , PHP , Javascript , ¹«·áÆùÆ® , ASP
»ó¼¼°Ë»ö
Ȩ > JAVASCRIPT > javascript ¼Ò½ºÃ¢°í > ½Ã°£,³¯Â¥ > Scrollable HTML table (Å×À̺íÀÚü ½ºÅ©·Ñ) »ó¼¼Á¤º¸
»çÀÌÆ®µî·Ï
Ŭ¶ó¿ìµåű×
javascript
PHP
HTML
ASP
mysql
CSS
Mobile
image
jquery
slide
¸Þ´º
�޴�
2023
ÇöÀçÁ¢¼ÓÀÚ ¸í »õ·Î°íħ
Scrollable HTML table (Å×À̺íÀÚü ½ºÅ©·Ñ)
¼Ò½ºÅë°èÁ¤º¸ ¿À·ù½Å°í ¹× ¹®ÀÇ
ÇØÇÇÆÀ
³×ƼÁð
Æ®À§ÅÍ·Î º¸³»±â ÆäÀ̽ººÏÀ¸·Î º¸³»±â
¼Ò½ººÐ·ù ½Ã°£,³¯Â¥
´Ù¿î·Îµå Ƚ¼ö 1152 ȸ
°£´Ü¼³¸í Å×À̺í ÀÚü·Î ½ºÅ©·Ñ¸µÇÏ´Â °ü·Ã ÀÚ¹Ù½ºÅ©¸³Æ®ÀÔ´Ï´Ù.
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
ȨÆäÀÌÁö¹Ù·Î°¡±â ¼Ò½º´Ù¿î·Îµå µ¥¸ð ¹Ì¸®º¸±â ½ºÅ©·¦Çϱâ

[JS]

function ScrollableTable (tableEl, tableHeight, tableWidth) {

 this.initIEengine = function () {

  this.containerEl.style.overflowY = 'auto';
  if (this.tableEl.parentElement.clientHeight - this.tableEl.offsetHeight < 0) {
   this.tableEl.style.width = this.newWidth - this.scrollWidth +'px';
  } else {
   this.containerEl.style.overflowY = 'hidden';
   this.tableEl.style.width = this.newWidth +'px';
  }

  if (this.thead) {
   var trs = this.thead.getElementsByTagName('tr');
   for (x=0; x<trs.length; x++) {
    trs[x].style.position ='relative';
    trs[x].style.setExpression("top",  "this.parentElement.parentElement.parentElement.scrollTop + 'px'");
   }
  }

  if (this.tfoot) {
   var trs = this.tfoot.getElementsByTagName('tr');
   for (x=0; x<trs.length; x++) {
    trs[x].style.position ='relative';
    trs[x].style.setExpression("bottom",  "(this.parentElement.parentElement.offsetHeight - this.parentElement.parentElement.parentElement.clientHeight - this.parentElement.parentElement.parentElement.scrollTop) + 'px'");
   }
  }

  eval("window.attachEvent('onresize', function () { document.getElementById('" + this.tableEl.id + "').style.visibility = 'hidden'; document.getElementById('" + this.tableEl.id + "').style.visibility = 'visible'; } )");
 };


 this.initFFengine = function () {
  this.containerEl.style.overflow = 'hidden';
  this.tableEl.style.width = this.newWidth + 'px';

  var headHeight = (this.thead) ? this.thead.clientHeight : 0;
  var footHeight = (this.tfoot) ? this.tfoot.clientHeight : 0;
  var bodyHeight = this.tbody.clientHeight;
  var trs = this.tbody.getElementsByTagName('tr');
  if (bodyHeight >= (this.newHeight - (headHeight + footHeight))) {
   this.tbody.style.overflow = '-moz-scrollbars-vertical';
   for (x=0; x<trs.length; x++) {
    var tds = trs[x].getElementsByTagName('td');
    tds[tds.length-1].style.paddingRight += this.scrollWidth + 'px';
   }
  } else {
   this.tbody.style.overflow = '-moz-scrollbars-none';
  }

  var cellSpacing = (this.tableEl.offsetHeight - (this.tbody.clientHeight + headHeight + footHeight)) / 4;
  this.tbody.style.height = (this.newHeight - (headHeight + cellSpacing * 2) - (footHeight + cellSpacing * 2)) + 'px';

 };

 this.tableEl = tableEl;
 this.scrollWidth = 16;

 this.originalHeight = this.tableEl.clientHeight;
 this.originalWidth = this.tableEl.clientWidth;

 this.newHeight = parseInt(tableHeight);
 this.newWidth = tableWidth ? parseInt(tableWidth) : this.originalWidth;

 this.tableEl.style.height = 'auto';
 this.tableEl.removeAttribute('height');

 this.containerEl = this.tableEl.parentNode.insertBefore(document.createElement('div'), this.tableEl);
 this.containerEl.appendChild(this.tableEl);
 this.containerEl.style.height = this.newHeight + 'px';
 this.containerEl.style.width = this.newWidth + 'px';


 var thead = this.tableEl.getElementsByTagName('thead');
 this.thead = (thead[0]) ? thead[0] : null;

 var tfoot = this.tableEl.getElementsByTagName('tfoot');
 this.tfoot = (tfoot[0]) ? tfoot[0] : null;

 var tbody = this.tableEl.getElementsByTagName('tbody');
 this.tbody = (tbody[0]) ? tbody[0] : null;

 if (!this.tbody) return;

 if (document.all && document.getElementById && !window.opera) this.initIEengine();
 if (!document.all && document.getElementById && !window.opera) this.initFFengine();


}


[HTML]

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <title>Scrollable HTML table</title>
 <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
 <script type="text/javascript" src="webtoolkit.scrollabletable.js"></script>

 <style>
  table {
   text-align: left;
   font-size: 12px;
   font-family: verdana;
   background: #c0c0c0;
  }

  table thead  {
   cursor: pointer;
  }

  table thead tr,
  table tfoot tr {
   background: #c0c0c0;
  }

  table tbody tr {
   background: #f0f0f0;
  }

  td, th {
   border: 1px solid white;
  }
 </style>
</head>

<body>

<table cellspacing="1" cellpadding="2" class="" id="myScrollTable" width="400">
 <thead>
  <tr>
   <th class="c1">Name</th>
   <th class="c2">Surename</th>
   <th class="c3">Age</th>
  </tr>
 </thead>

 <tbody>
  <tr class="r1">
   <td class="c1">John</th>
   <td class="c2">Smith</th>
   <td class="c3">30</th>
  </tr>
  <tr class="r2">
   <td class="c1">John</th>
   <td class="c2">Smith</th>
   <td class="c3">31</th>
  </tr>
  <tr class="r1">
   <td class="c1">John</th>
   <td class="c2">Smith</th>
   <td class="c3">32</th>
  </tr>
  <tr class="r2">
   <td class="c1">John</th>
   <td class="c2">Smith</th>
   <td class="c3">33</th>
  </tr>
  <tr class="r1">
   <td class="c1">John</th>
   <td class="c2">Smith</th>
   <td class="c3">34</th>
  </tr>
  <tr class="r2">
   <td class="c1">John</th>
   <td class="c2">Smith</th>
   <td class="c3">35</th>
  </tr>
  <tr class="r1">
   <td class="c1">John</th>
   <td class="c2">Smith</th>
   <td class="c3">36</th>
  </tr>
  <tr class="r2">
   <td class="c1">John</th>
   <td class="c2">Smith</th>
   <td class="c3">37</th>
  </tr>
 </tbody>

 <tfoot>
  <tr>
   <th class="c1">Name</th>
   <th class="c2">Surename</th>
   <th class="c3">Age</th>
  </tr>
 </tfoot>
</table>

<script type="text/javascript">
var t = new ScrollableTable(document.getElementById('myScrollTable'), 100);
</script>

</body>
</html>


³×ƼÁð ÀÇ°ß   ÀÌ¿ëÇϽŠÀÚ·áÀÇ Èı⸦ ÀÚÀ¯·Ó°Ô ÀÛ¼ºÇϼ¼¿ä. (»ó¾÷ÀûÀÎ ±¤°í ¹× µµ¹è¼º ±Û µîÀº »çÀüÅ뺸¾øÀÌ »èÁ¦µÉ ¼ö ÀÖ½À´Ï´Ù.)
³»¿ë ¾ÆÀ̵ð ÀÇ°ß³²±â±â
µî·ÏµÈ ÀÇ°ßÀÌ ¾ø½À´Ï´Ù.
1
À̸§
³»¿ë
:³×¸Â¾Æ¿ä: :È­³ª´Â±º¿ä: :Àá¿Í: :¿ì¿ïÇØ: :À̰ǾƳÄ: :¿ÕÇÏÇÏ: ¿Õ¿ôÀ½~ ³î·¥~
Æò°¡Çϱâ ÈǸ¢ÇÔ ¸Å¿ìÁÁÀ½ ÁÁÀ½ ±¦ÂúÀ½ º¸Åë º°·Î
µµ¹è¹æÁöÅ°
 76848118 º¸ÀÌ´Â µµ¹è¹æÁöÅ°¸¦ ÀÔ·ÂÇϼ¼¿ä.