관리 메뉴

엉망진창

드래그로 체크박스 체크하기 2 본문

Study_Web/JS

드래그로 체크박스 체크하기 2

엉망진창 2008. 6. 30. 11:49

<html>
<head>
<title>http://www.blueb.co.kr</title>

<script type='text/javascript'>
window.onload = function()
{
  initCheckBoxes('table1');
}
/* Click-n-Drag Checkboxes */
var gCheckedValue = null;
function initCheckBoxes(sTblId)
{
  xTableIterate(sTblId,
    function(td, isRow) {
      if (!isRow) {
        var cb = td.getElementsByTagName('input');
        if (cb && cb[0].type.toLowerCase() == 'checkbox') {
          td.checkBoxObj = cb[0];
          td.onmousedown = tdOnMouseDown;
          td.onmouseover = tdOnMouseOver;
          td.onclick = tdOnClick;
        }
      }
    }
  );
}
function tdOnMouseDown(ev)
{
  if (this.checkBoxObj) {
    gCheckedValue = this.checkBoxObj.checked = !this.checkBoxObj.checked;
    document.onmouseup = docOnMouseUp;
    document.onselectstart = docOnSelectStart; // for IE
    xPreventDefault(ev); // cancel text selection
  }
}
function tdOnMouseOver(ev)
{
  if (gCheckedValue != null && this.checkBoxObj) {
    this.checkBoxObj.checked = gCheckedValue;
  }
}
function docOnMouseUp()
{
  document.onmouseup = null;
  document.onselectstart = null;
  gCheckedValue = null;
}
function tdOnClick()
{
  // Cancel a click on the checkbox itself. Let it bubble up to the TD
  return false;
}
function docOnSelectStart(ev)
{
  return false; // cancel text selection
}


function xGetElementById(e)
{
  if(typeof(e)=='string') {
    if(document.getElementById) e=document.getElementById(e);
    else if(document.all) e=document.all[e];
    else e=null;
  }
  return e;
}
function xTableIterate(sec, fnCallback, data)
{
  var r, c;
  sec = xGetElementById(sec);
  if (!sec || !fnCallback) { return; }
  for (r = 0; r < sec.rows.length; ++r) {
    if (false == fnCallback(sec.rows[r], true, r, c, data)) { return; }
    for (c = 0; c < sec.rows[r].cells.length; ++c) {
      if (false == fnCallback(sec.rows[r].cells[c], false, r, c, data)) { return; }
    }
  }
}
function xPreventDefault(e)
{
  if (e && e.preventDefault) e.preventDefault();
  else if (window.event) window.event.returnValue = false;
}
</script>
</head>
<body>


<form name='f1' action=''>
<table id='table1'>
  <tr><td>Check box 0: <input name='checks' type='checkbox'></td></tr>
  <tr><td>Check box 1: <input name='checks' type='checkbox'></td></tr>
  <tr><td>Check box 2: <input name='checks' type='checkbox'></td></tr>
  <tr><td>Check box 3: <input name='checks' type='checkbox'></td></tr>
  <tr><td>Check box 4: <input name='checks' type='checkbox'></td></tr>
  <tr><td>Check box 5: <input name='checks' type='checkbox'></td></tr>
  <tr><td>Check box 6: <input name='checks' type='checkbox'></td></tr>
  <tr><td>Check box 7: <input name='checks' type='checkbox'></td></tr>
  <tr><td>Check box 8: <input name='checks' type='checkbox'></td></tr>
  <tr><td>Check box 9: <input name='checks' type='checkbox'></td></tr>
</table>
</form>


</body>
</html>

출처 : 블루비

'Study_Web > JS' 카테고리의 다른 글

Open Source Web File Manager: KCFinder  (0) 2010.07.05
웹사이트에 무료 FLVPlayer 달기  (2) 2009.08.12
드래그로 체크박스 체크하기  (0) 2008.06.30
문서 객체 모델(DOM)  (0) 2008.04.05
자바스크립트 이벤트 핸들러  (2) 2008.02.15