zoukankan      html  css  js  c++  java

  • Jquery打造可以上下移动行的表格

    html] view plaincopyprint?

    1. <html> 
    2. <head> 
    3. <title>表格</title> 
    4. <styletype="text/css"> 
    5. .editText
    6. { 
    7.     border-1px; 
    8.     border-top-style:none; 
    9. border-left-style:none;
    10. border-right-style:none;
    11.     border-bottom-style:solid; 
    12.     border-color:#030; 
    13.     100%; 
    14. } 
    15. </style> 
    16. <scriptsrc="jquery-1.3.2.js"type="text/javascript"> 
    17. </script> 
    18. <scripttype="text/javascript"> 
    19. function moveUp(obj) 
    20. { 
    21.     var current=$(obj).parent().parent(); 
    22.     var prev=current.prev(); 
    23.     if(current.index()>1) 
    24.     { 
    25.         current.insertBefore(prev); 
    26.     } 
    27. } 
    28. function moveDown(obj) 
    29. { 
    30.     var current=$(obj).parent().parent(); 
    31.     var next=current.next(); 
    32.     if(next) 
    33.     { 
    34.         current.insertAfter(next); 
    35.     } 
    36. } 
    37. </script> 
    38. </head> 
    39. <body> 
    40. <tableclass="grid"width="100%"border="1"cellspacing="0"cellpadding="0"> 
    41.   <tr> 
    42.     <td>字段英文名</td> 
    43.     <td>字段中文名</td> 
    44.     <td>字段数据类型</td> 
    45.     <td>列宽</td> 
    46.     <td>是否显示</td> 
    47.     <td>是否作为查询条件</td> 
    48.     <td>调整顺序</td> 
    49.   </tr> 
    50.   <tr> 
    51.     <td>1</td> 
    52.     <td><inputtype="text"name="textfield"class="editText"id="textfield"></td> 
    53.     <td></td> 
    54.     <td><inputtype="text"name="textfield5"id="textfield5"></td> 
    55.     <td><inputtype="checkbox"name="checkbox"id="checkbox"></td> 
    56.     <td><inputtype="checkbox"name="checkbox5"id="checkbox5"></td> 
    57.     <td><ahref="javascript:void(0)"onClick="moveUp(this)">上移</a><ahref="javascript:void(0)"onClick="moveDown(this)">下移</a></td> 
    58.   </tr> 
    59.   <tr> 
    60.     <td>2</td> 
    61.     <td><inputtype="text"name="textfield2"id="textfield2"></td> 
    62.     <td></td> 
    63.     <td><inputtype="text"name="textfield6"id="textfield6"></td> 
    64.     <td><inputtype="checkbox"name="checkbox2"id="checkbox2"></td> 
    65.     <td><inputtype="checkbox"name="checkbox6"id="checkbox6"></td> 
    66.     <td><ahref="javascript:void(0)"onClick="moveUp(this)">上移</a><ahref="javascript:void(0)"onClick="moveDown(this)">下移</a></td> 
    67.   </tr> 
    68.   <tr> 
    69.     <td>3</td> 
    70.     <td><inputtype="text"name="textfield3"id="textfield3"></td> 
    71.     <td></td> 
    72.     <td><inputtype="text"name="textfield7"id="textfield7"></td> 
    73.     <td><inputtype="checkbox"name="checkbox3"id="checkbox3"></td> 
    74.     <td><inputtype="checkbox"name="checkbox7"id="checkbox7"></td> 
    75.     <td><ahref="javascript:void(0)"onClick="moveUp(this)">上移</a><ahref="javascript:void(0)"onClick="moveDown(this)">下移</a></td> 
    76.   </tr> 
    77.   <tr> 
    78.     <td>4</td> 
    79.     <td><inputtype="text"name="textfield4"id="textfield4"></td> 
    80.     <td></td> 
    81.     <td><inputtype="text"name="textfield8"id="textfield8"></td> 
    82.     <td><inputtype="checkbox"name="checkbox4"id="checkbox4"></td> 
    83.     <td><inputtype="checkbox"name="checkbox8"id="checkbox8"></td> 
    84.     <td><ahref="javascript:void(0)"onClick="moveUp(this)">上移</a><ahref="javascript:void(0)"onClick="moveDown(this)">下移</a></td> 
    85.   </tr> 
    86. </table> 
    87. </body> 
    88. </html> 
  • 相关阅读:
    HCIA-Storage:第五章 常用存储协议介绍
    HCIA-Storage:SAN基础业务配置和使用：IPSAN,FCSAN
    RH2288v3常用的知识
    不常见的RAID，RAID2,RAID4,RAID7
    华为存储设备管理ip修改
    HCIA-Storage:第七章存储可靠性
    HCIA-Storage:第四章存储系统结构
    SSH服务见解
    shell学习笔记之正则表达式
    shell学习笔记之crontab
  • 原文地址：https://www.cnblogs.com/tabcdt/p/2756490.html
Copyright © 2011-2022 走看看