본문 바로가기
JavaScript/script

javascript 웹페이지의 선택된 node 옴기기

by 아이티.파머 2010. 10. 19.
반응형

 

 

 

선택 법무법인명
A
B
C
D
선택 법무법인명
3
4

 

 

코드

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
 <head>
  <script type="text/javascript">
  function fncMove( from, to ){
      var fm = document.getElementById(from);
      var to = document.getElementById(to);

     // 멀티로 옮길때 위에서부터 옮기면 아래 값이 옮겨 지면서 순서가 바뀌어서
     // 아래서부터 역으로 올라오도록 변경 하시면 됩니다.
      for( var i=(fm.childNodes.length-1); i>=0; i-- ){
          var node1 = fm.childNodes[i];
          if(node1.nodeName=='TR'){
              for(var j=0; j<node1.childNodes.length; j++){
                  var node2 = node1.childNodes[j];
                  if(node2.nodeName=='TD'){
                      for(var k=0; k<node2.childNodes.length; k++){
                          var node3 = node2.childNodes[k];
                          if(node3.nodeName=='INPUT'){
                              if(node3.checked){
                                  node3.checked = false;
                                  to.appendChild(node1);
                              }
                          }
                      }
                  }
              }
          }
      }
  }
  
  document.observe("dom:loaded",function(){});
  </script>
 </head>
 <body>
  <div>
   <div id="lawFormDiv"       style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;float:left; ">
    <table>
     <thead>
      <tr>
       <td>선택</td>
       <td>법무법인명</td>
      </tr>
     </thead>
     <tbody id='tby1'>
      <tr>
       <td><input type="checkbox" /> </td>
       <td>A <input type="text" name="lawFormCode" value="1"/></td>
      </tr>
      <tr>
       <td><input type="checkbox" /> </td>
       <td>B <input type="text" name="lawFormCode" value="1"/></td>
      </tr>
      <tr>
       <td><input type="checkbox" /> </td>
       <td>C <input type="text" name="lawFormCode" value="1"/></td>
      </tr>
      <tr>
       <td><input type="checkbox" /> </td>
       <td>D <input type="text" name="lawFormCode" value="1"/></td>
      </tr>
     </tbody>
    </table>
   </div>
   <span style='float:left; padding-top:35px; width:40px; text-align:center;'>
             <div style='cursor:pointer;' onclick='fncMove("tby1","tby2");'>▶</div>
             <div style='height:10px;'></div>
             <div style='cursor:pointer;' onclick='fncMove("tby2","tby1");'>◀</div>
         </span>
   <div id="lawFormChoiceDiv" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;">
    <table>
     <thead>
      <tr>
       <td>선택</td>
       <td>법무법인명</td>
      </tr>
     </thead>
     <tbody id='tby2'>
      
     </tbody>
    </table>
   </div>
   <div id="lawerDiv"      style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;float:left; ">3</div>
   <div id="lawerChoiceDiv"   style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;">4</div>
  </div> 
 </body>
</html>

 

 




출처 : http://kin.naver.com/qna/detail.nhn?d1id=1&dirId=1040202&docId=110530955&qb=amF2YXNjcmlwdCDtlokg7J2064+Z&enc=utf8&section=kin&rank=1&search_sort=0&spq=0&pid=g70qzB331xRssvaJRd4ssv--169733&sid=TL0qqMcLvUwAAHREE1o

반응형