Chinaunix首页 | 论坛 | 博客

IT民工窝棚qbq.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

qbq

  • 博客访问： 30462882
  • 博文数量： 708
  • 博客积分： 12163
  • 博客等级： 上将
  • 技术积分： 8240
  • 用 户 组： 普通用户
  • 注册时间： 2007-12-04 20:59
文章分类

全部博文（708）

推荐博文
相关博文
JavaScript动态table 移动checkbox及内容

分类： Java

2011-11-15 16:07:45

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
  2. <html xmlns="" xml:lang="en" lang="en">
  3. <head>
  4. <title>Checkboxes</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  7. <style type="text/css">

  9. .table-wapper {padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; width:100%; border:1px solid #676767; height: 200px}
  10. .create-list-table {padding:0px 0px 0px 0px; margin:0px 0px 0px 0px; width:100%;}
  11. .create-list-table th {font-family:arial,sans-serif;font-size:85%;padding:5px 4px; font-weight:normal; border-bottom:1px solid #676767; background-color:#F0F0F0;}
  12. .create-list-table td {font-family:arial,sans-serif;font-size:85%;padding:5px 4px;}
  13. .create-list-table .align-center{text-align:center}
  14. .create-list-table .align-right{text-align:right}
  15. .create-list-table .total-cell {padding-right:295px;text-align:right;}
  16. .create-list-table .alt-row {background-color:#ECF1F7;}
  17. .create-list-table .bottom-border {border-bottom:1px solid #D1DAE3;}
  18. .create-new-list {padding:1px 0px 0px 0px;}
  19. .create-new-list .left-section {width:286px; float:left; padding:0px 0px 0px 0px;}
  20. .create-new-list .middle-section {width:100px; float:left; padding:60px 0px 0px 0px;}
  21. .create-new-list .middle-section input {width:75px;}
  22. .create-new-list .right-section {width:286px; float:left;}
  23. .create-new-list .button {font-size:85%; width:58px; margin:6px 0px 6px 8px;}
  24. .create-new-list h3 {font-family:arial,sans-serif;font-size:93%; font-weight:bold;padding:0px 0px 3px 0px;}
  25. </style>

  27. </head>
  28. <body>    
  29.             
  30. <div class="create-new-list">
  31.     <div class="left-section">
  32.         <div class="table-wapper">
  33.             <table class="create-list-table" border="0" cellpadding="0" cellspacing="0" summary="Summary" id="allPositionsTable">
  34.                 <thead>
  35.                     <tr>
  36.                         <th scope="col" class="align-center"><label class="off-screen" for="checkAllPositions"></label><input type="checkbox" name="position" id="allPositionsTableCheckbox" value="" class="check" onclick="selectAllDomain('allPositionsTableCheckbox','allPositionsTableItem')"/>
  37.                         </th>
  38.                         <th scope="col">Description
  39.                         </th>
  40.                         <th scope="col" class="align-right">Quantity
  41.                         </th>
  42.                     </tr>
  43.                 </thead>
  44.                 <tbody>
  45.                     
  46.                 </tbody>
  47.             </table>
  48.         </div>
  49.     </div>
  50.     <div class="middle-section">
  51.         <input type="submit" class="button" value="Add>>" id="add" onclick="selectPositions()"/>
  52.         <input type="submit" class="button" value="<<Remove" id="remove" onclick="removePositions()"/>
  53.     </div>
  54.     <div class="right-section">
  55.         <div class="table-wapper">
  56.             <table class="create-list-table" border="0" cellpadding="0" cellspacing="0" summary="Summary" id="selectedPositionsTable">
  57.                 <thead>
  58.                     <tr>
  59.                         <th scope="col" class="align-center"><label class="off-screen" for="selectedPositions"></label><input type="checkbox" name="position" id="selectedPositionsTableCheckbox" value="" class="check" onclick="selectAllDomain('selectedPositionsTableCheckbox','selectedPositionsTableItem')"/>
  60.                         </th>
  61.                         <th scope="col">Description
  62.                         </th>
  63.                         <th scope="col" class="align-right">Quantity
  64.                         </th>
  65.                     </tr>
  66.                 </thead>
  67.                 <tbody>
  68.                     
  69.                 </tbody>
  70.             </table>
  71.         </div>
  72.     </div>
  73. </div>

  75. <script type="text/javascript">

  77. //----------------------------------------------------------------------------------------------------------------------------------------
  78. // Data model
  79. qbq = {};


  82. qbq.CusipList = function(){
  83.     var listName;
  84.     var positionsList;
  85. };


  88. qbq.Position = function(newId, newDes, newQty){
  89.     var id;
  90.     var description;
  91.     var quantity;
  92.         
  93.     this.id = newId;
  94.     this.description = newDes;
  95.     this.quantity = newQty;
  96. };
  97. //----------------------------------------------------------------------------------------------------------------------------------------

  99. //----------------------------------------------------------------------------------------------------------------------------------------
  100. // Data instance
  101. var allPositions = new Array(
  102.         new qbq.Position('1001', 'Des1001', 1001),
  103.         new qbq.Position('1002', 'Des1002', 1002),
  104.         new qbq.Position('1003', 'Des1003', 1003),
  105.         new qbq.Position('1004', 'Des1004', 1004),
  106.         new qbq.Position('1005', 'Des1005', 1005),
  107.         new qbq.Position('1006', 'Des1006', 1006)
  108. );

  110. var cusipList = new qbq.CusipList();
  111. cusipList.positionsList = new Array(1);
  112. //----------------------------------------------------------------------------------------------------------------------------------------

  114. // Add positions to table
  115. function addPositionToTable(tableId, positionSet) {

  117.     var positionsTable = document.getElementById(tableId);
  118.     var trName = tableId + "Item";
  119.     
  120.     if (positionSet.length > 0 && typeof(positionSet[0]) != "undefined") {
  121.         for(var i = 0; i < positionSet.length; i++) {
  122.         
  123.             var positionTr = positionsTable.children[1].insertRow(-1);
  124.             positionTr.id = tableId + 'tr' + positionSet[i].id;
  125.             
  126.             var positionTd = new Array(3);
  127.             for(var j = 0; j < positionTd.length; j++) {
  128.                 positionTd[j] = positionTr.insertCell(-1);
  129.             }
  130.             positionTd[0].className = 'align-center';
  131.             positionTd[0].innerHTML = '+ positionSet[i].id + '" id="' + tableId + 'cb' + positionSet[i].id + '" name="'+ trName + '" onclick="changeSelect(\'' + tableId + 'Checkbox' + '\',\''+ trName +'\')" />';
  132.             //positionTd[1].innerHTML = positionTr.rowIndex;
  133.             positionTd[1].innerHTML = positionSet[i].description;
  134.             positionTd[2].className = 'align-right';
  135.             positionTd[2].innerHTML = positionSet[i].quantity;
  136.         }
  137.     }
  138. }

  140. // Remove positions to table
  141. function removePositionToTable(tableId, positionSet) {

  143.     var positionsTable = document.getElementById(tableId);
  144.     
  145.     if (positionSet.length > 0 && typeof(positionSet[0]) != "undefined") {
  146.         for(var i = positionSet.length - 1; i >= 0; i--) {
  147.         
  148.             var trId = tableId + 'tr' + positionSet[i].id;
  149.             var tr = document.getElementById(trId);
  150.             positionsTable.deleteRow(tr.rowIndex);
  151.             
  152.         }
  153.     }
  154. }

  156. // Select all Checkbox
  157. function selectAllDomain(selectAllId,selectedDomainsName){
  158.     var selectAll = document.getElementById(selectAllId);
  159.     var selectedDomains = document.getElementsByName(selectedDomainsName);

  161.     if(typeof(selectedDomains)==null || typeof(selectedDomains)== "undefined") {
  162.         return;
  163.     }

  165.     if(selectAll.checked==true) {

  167.         if(typeof(selectedDomains[0])=="undefined"){
  168.             selectedDomains.checked=true;
  169.         }else{
  170.             for(i=0;i<selectedDomains.length;i++){
  171.                 selectedDomains[i].checked=true;
  172.             }
  173.         }

  175.     }else{

  177.         if(typeof(selectedDomains[0])=="undefined"){
  178.             selectedDomains.checked=false;
  179.         }else{
  180.             for(i=0;i<selectedDomains.length;i++){
  181.                 selectedDomains[i].checked=false;
  182.             }
  183.         }

  185.     }
  186.  
  187. }

  189. // Change Checkbox selected status
  190. function changeSelect(selectAllId,selectedDomainsName){

  192.     var selectAll = document.getElementById(selectAllId);
  193.     var selectedDomains = document.getElementsByName(selectedDomainsName);

  195.     if(typeof(selectedDomains[0])=="undefined"){
  196.         se=selectedDomains.checked;
  197.         if(se==false) {
  198.             selectAll.checked=false;
  199.         }
  200.     }else{

  202.         for(i=0;i<selectedDomains.length;i++){
  203.             se=selectedDomains[i].checked;
  204.             if(se==false){
  205.                 selectAll.checked=false;
  206.                 break;
  207.             }
  208.         }
  209.     }

  211.     if(se==true) {
  212.         selectAll.checked=true;
  213.     }
  214. }

  216. // Find position by id
  217. function findPositionById(id , collection){
  218.     for(var i=0;i < collection.length; i++){
  219.         var position = collection[i];

  221.         if(id==position.id){
  222.             return position;
  223.         }

  225.     }
  226. }

  228. // Get selected positions from Checkbox collection
  229. function getSelectedPositions(itemsName) {
  230.     var selectedPositions = new Array(1);
  231.     var checkPositionItems = document.getElementsByName(itemsName);
  232.     for(var i = 0; i < checkPositionItems.length;i++){

  234.         if(checkPositionItems[i].checked == true){
  235.             var position = findPositionById(checkPositionItems[i].value, allPositions);

  237.             if (selectedPositions.length == 1 && typeof(selectedPositions[0]) == "undefined") {
  238.                 selectedPositions[0] = position;
  239.             } else {
  240.                 var tempPositions = new Array(1);                
  241.                 tempPositions[0] = position;
  242.                 selectedPositions = selectedPositions.concat(tempPositions);
  243.             }
  244.      }
  245.     }
  246.     return selectedPositions;
  247. }

  249. // Select positions
  250. function selectPositions() {
  251.     document.getElementById('allPositionsTableCheckbox').checked = false;
  252.     document.getElementById('selectedPositionsTableCheckbox').checked = false;
  253.     
  254.     var tempPositions = getSelectedPositions("allPositionsTableItem");
  255.     if (typeof(tempPositions[0]) == "undefined") {
  256.         return;
  257.     }
  258.     
  259.     if (cusipList.positionsList.length == 1 && typeof(cusipList.positionsList[0]) == "undefined") {
  260.         cusipList.positionsList = tempPositions;
  261.     } else {
  262.         cusipList.positionsList = cusipList.positionsList.concat(tempPositions);
  263.     }
  264.     
  265.     removePositionToTable('allPositionsTable', tempPositions);
  266.     addPositionToTable('selectedPositionsTable', tempPositions);
  267. }

  269. // Remove positions from selected positions
  270. function removePositions() {
  271.     document.getElementById('allPositionsTableCheckbox').checked = false;
  272.     document.getElementById('selectedPositionsTableCheckbox').checked = false;
  273.     
  274.     var selectedPositions = getSelectedPositions("selectedPositionsTableItem");
  275.     if (typeof(selectedPositions[0]) == "undefined") {
  276.         return;
  277.     }
  278.     
  279.     // remove from cusipList.positionsList
  280.     for (var i = 0; i < selectedPositions.length; i++) {
  281.     
  282.         for(var j=0;j < cusipList.positionsList.length; j++){

  284.             if(cusipList.positionsList[j].id == selectedPositions[i].id){
  285.                 cusipList.positionsList.splice(j,1);
  286.             }

  288.         }
  289.     }
  290.     
  291.     removePositionToTable('selectedPositionsTable', selectedPositions);
  292.     addPositionToTable('allPositionsTable', selectedPositions);
  293. }

  295. addPositionToTable('allPositionsTable', allPositions);
  296. </script>
  297. </body>
  298. </html>
阅读(1791) | 评论(0) | 转发(0) |
0

上一篇：jQuery Ajax

下一篇：Google Analytics

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6