zoukankan      html  css  js  c++  java

  • HTML篇之CSS样式：<button></button>按钮变成超链接<a></a>的样式

    原文：http://blog.csdn.net/qq_16769857/article/details/52055349
    [html] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>Document</title>  
    6.     <script type="text/javascript" src="jquery.min.js"></script>  
    7.     <style>  
    8.     .btn {  
    9.         color: blue;      
    10.         background-color: #FFFFFF;  
    11.         border: 0px none;  //去边框  
    12.         font-family: "宋体";  
    13.         font-size: 15px;  
    14.         text-decoration:underline;  //加下划线  
    15.     }  
    16.     .btn:hover{  
    17.         color:red;  
    18.         border: none;  
    19.         cursor: hand;  
    20.         cursor: pointer;  
    21.         text-decoration:underline;  //加下划线  
    22.     }  
    23.     .btn:focus {   
    24.         outline: none;    //去边框  
    25.     }   
    26.     </style>  
    27.     <script type="text/javascript">  
    28. $(function(){  
    29.     $("input:button").click(function() {  
    30.         str = $(this).val()=="编辑"?"确定":"编辑";    
    31.         $(this).val(str);   // 按钮被点击后，在“编辑”和“确定”之间切换  
    32.         $(this).parent().siblings("td.'.2-item'").each(function() {  // 获取当前行的其他单元格  
    33.             obj_text = $(this).find("input:text");    // 判断单元格下是否有文本框  
    34.             if(!obj_text.length)   // 如果没有文本框，则添加文本框使之可以编辑  
    35.                 $(this).html("<input type='text' value='"+$(this).text()+"'>");  
    36.             else   // 如果已经存在文本框，则将其显示为文本框修改的值  
    37.                 $(this).html(obj_text.val());   
    38.         });  
    39.         $(this).parent().siblings("td.'.1-item'").each(function() {  // 获取当前行的其他单元格  
    40.             obj_text = $(this).find("select");    // 判断单元格下是否有文本框  
    41.             if(!obj_text.length)   // 如果没有文本框，则添加文本框使之可以编辑  
    42.                 $(this).html("<select><option value='volvo'>Volvo</option><option value='volvo'>Volvo</option></select>");  
    43.             else   // 如果已经存在文本框，则将其显示为文本框修改的值  
    44.                 $(this).html(obj_text.val());   
    45.         });  
    46.     });  
    47.      });      
    48.     </script>  
    49. </head>  
    50. <body>  
    51. <table>  
    52.     <tr>  
    53.         <td>2</td>  
    54.         <td class="1-item">1</td>  
    55.         <td class="2-item">2</td>  
    56.         <td class="2-item">2</td>  
    57.         <td><input class="btn"  type="button" value="编辑"></td>  
    58.     </tr>  
    59.     <tr><td>2</td><td>5</td><td><input type="button" name="btnSubmit" id="btnSubmit"  value="编辑"></td></tr>  
    60.     <tr><td>3</td><td>8</td><td><input type="button" value="编辑"></td></tr>  
    61.     <tr><td>4</td><td>2</td><td><input type="button" value="编辑"></td></tr>  
    62. </table>  
    63. </body>  
    64. </html>  



     

    注：样式实现的功能：按钮变成超链接。其他代码是可编辑table，如果不可行可能是引用的

    [html] view plain copy
     
     print?在CODE上查看代码片派生到我的代码片
      1. <strong><span style="font-size:18px;">jquery.min.js版本问题</span></strong>
  • 相关阅读:
    Java并发（5）- ReentrantLock与AQS
    Java并发（4）- synchronized与CAS
    Windows cmd 查看文件MD5 SHA1 SHA256
    进程、线程、协程概念理解
    Python学习--Python运算符
    Python学习--Python变量类型
    MySQL性能优化
    Docket学习--Docker入门
    Python学习--Python基础语法
    Python学习--Python 环境搭建
  • 原文地址：https://www.cnblogs.com/langtianya/p/6539550.html
Copyright © 2011-2022 走看看