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. centos6下的lvm逻辑卷的管理

    LVM:Logical Volume Manager 将多块设备组合成一个来使用 dm:device mapper 设备映射 设备文件 /dev/卷组名/逻辑卷名          /dev/mapp ...

  2. python风流史

    python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言 ...

  3. HTML5事件—visibilitychange 页面可见性改变事件

    转:https://blog.csdn.net/yusirxiaer/article/details/73480916 又看到一个很有意思的HTML5事件 visibilitychange事件是浏览器 ...

  4. Json学习整理

    1:javascript对JSON的支持 2:java对JSON的支持 alibaba->fastjson 封装工具类: import com.alibaba.fastjson.JSONObje ...

  5. python接口自动化测试五：乱码、警告、错误处理

    乱码: 以content字节流输出,解码成utf-8: print(r.encoding)   # 查看返回的编码格式: 去掉Warning警告: import urllib3 urllib3.dis ...

  6. 多行文字溢出[...]的实现(text-overflow: ellipsis)

    声明:此文章为转载(点击查看原文),如有侵权24小时内删除.联系QQ:1522025433. 对于单行文字, 很简单.(详见css3产考手册 进入) css: .oneLine { width: 20 ...

  7. MarkDown常用语法及word转MarkDown

    介绍 Markdown 的目标是实现「易读易写」. 可读性,无论如何,都是最重要的.一份使用 Markdown 格式撰写的文件应该可以直接以纯文本发布,并且看起来不会像是由许多标签或是格式指令所构成. ...

  8. C#获取路径

    System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName -获取模块的完整路径. System.Environment.Cu ...

  9. Spring事务传播行为

    什么是事务传播行为 public void methodA(){ methodB(); //doSomething } @Transaction(Propagation=XXX) public voi ...

  10. zjoi 2017 树状数组

    题解: 感觉相比仙人掌简单了很多啊.. 首先会发现那个其实就是后缀和 然后其实就是判断一下两个位置的元素想不想等 然后l=1是要特判的 之后一个易错的地方就是去维护每个数是0/1的概率 因为这样概率是 ...