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，如果不可行可能是引用的

    1. <strong><span style="font-size:18px;">jquery.min.js版本问题</span></strong>

HTML篇之CSS样式：<button></button>按钮变成超链接<a></a>的样式的更多相关文章

  1. Bootstrap全局CSS样式之button和图片

    .btn-default--button的默认样式. .btn-primary--button的首选样式: .btn-success--button的成功样式: .btn-info--button的一 ...

  2. 纯CSS打造好看的按钮样式

    好看的按钮.链接.div样式,效果预览: http://hovertree.com/code/run/css/s8o19792.html 发现今天积分和排名不错: 代码如下: <!DOCTYPE ...

  3. JavaFX桌面应用开发-Button（按钮）与事件

    1:Button样式的操作原始代码: package application; import javafx.application.Application;import javafx.scene.Gr ...

  4. 第九篇、微信小程序-button组件

    主要属性: 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 效果图: ml: <!--默认的but ...

  5. 【Android开发日记】之入门篇（十四）——Button控件+自定义Button控件

        好久不见,又是一个新的学期开始了,为什么我感觉好惆怅啊!这一周也发生了不少事情,节假日放了三天的假(好久没有这么悠闲过了),实习公司那边被组长半强制性的要求去解决一个后台登陆的问题,结果就是把 ...

  6. input，button制作按钮IE6，IE7点击时1px黑边框的解决方法

    按钮在IE6中点击时1px黑边框的最常见的解决方法 首先设置按钮为none,然后在按钮外面套一层来实现边框的效果,部分代码如下 .btnbox{ border:solid 1px red;} .btn ...

  7. web前端篇：CSS使用，样式表特征，选择器

    目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...

  8. 隐藏一个button的方法（2种） 写出一个button的按钮（2种）

    display:none;visibility:hidden: <input type = button><button>这是一个按钮 </button>

  9. WPF自定义控件与样式(2)-自定义按钮FButton

    一．前言.效果图 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 还是先看看效果 ...

随机推荐

  1. Node.js ECONNREFUSED错误

    1 现象 node服务器 遇见此错误,如下:events.js:71throw arguments[1]; // Unhandled 'error' event^Error: connect ECON ...

  2. 判断Javascript变量是否为空 undefined 或者null（附样例）

    1.变量申明未赋值 var type; //type 变量未赋值 1. type==undefined //true 2. type===undefined //true 3. typeof(type ...

  3. bert中的分词

    直接把自己的工作文档导入的,由于是在外企工作,所以都是英文写的 chinese and english tokens result input: "我爱中国",tokens:[&q ...

  4. SQL表链接

  5. IntelliJ IDEA使用教程

    注:本文来源:李学凯 的<IntelliJ IDEA使用教程 (总目录篇)> 一:(总目录篇)_1:硬件要求 IntelliJ IDEA 对硬件的要求看上去不是很高.可是实际在开发中其实并 ...

  6. hdu3282 链表或者对顶堆

    维护序列的动态中位数 第一次用链表做题..感觉指针指来指去也挺麻烦的.. 本题链表解法就是用数组模拟出一个链表,然后离线输入所有数,排序,按照输入顺序在链表里删除元素,一次性删掉两个,然后中位数指针对 ...

  7. 用PNChart绘制折线图

    写在前面 上一篇文章已经介绍过用PNChart绘制饼状图了,绘制折线图的步骤和饼状图的步骤是相似的,按照中的准备做好准备工作后就可以绘制折线图了. 开始使用 1.在view中声明一个PNLineCha ...

  8. 性能测试十八：jmeter分布式

    一台压力机产生得压力是有限的,尤其是jmeter,java本来性能就不是很好,并发特别多的时候,jmeter的性能会急剧下降,正常的接口,若单台压力机,超过1000并发以后,jmeter的性能就不怎么 ...

  9. 使用css3美化复选框

    声明:文章为转载(略改动),点击查看原文.如有侵权24小时内删除,联系QQ:1522025433. 我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那 ...

  10. 《剑指offer》-斐波那契数列

    大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项. n<=39 这么直接的问fibonacci,显然是迭代计算.递归的问题在于重复计算,而迭代则避免了这一点:递归是自 ...