HTML篇之CSS样式:按钮变成超链接的样式

原文:http://blog.csdn.net/qq_16769857/article/details/52055349
[html]  view plain  copy
 
 print?
  1. >  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Documenttitle>  
  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'>Volvooption><option value='volvo'>Volvooption>select>");  
  43.             else   // 如果已经存在文本框,则将其显示为文本框修改的值  
  44.                 $(this).html(obj_text.val());   
  45.         });  
  46.     });  
  47.      });      
  48.     script>  
  49. head>  
  50. <body>  
  51. <table>  
  52.     <tr>  
  53.         <td>2td>  
  54.         <td class="1-item">1td>  
  55.         <td class="2-item">2td>  
  56.         <td class="2-item">2td>  
  57.         <td><input class="btn"  type="button" value="编辑">td>  
  58.     tr>  
  59.     <tr><td>2td><td>5td><td><input type="button" name="btnSubmit" id="btnSubmit"  value="编辑">td>tr>  
  60.     <tr><td>3td><td>8td><td><input type="button" value="编辑">td>tr>  
  61.     <tr><td>4td><td>2td><td><input type="button" value="编辑">td>tr>  
  62. table>  
  63. body>  
  64. html>  



 

 

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

[html]  view plain  copy
 
 print?
    1. <strong><span style="font-size:18px;">jquery.min.js版本问题span>strong>

你可能感兴趣的:(HTML篇之CSS样式:按钮变成超链接的样式)