HTML篇之CSS样式:<button></button>按钮变成超链接<a></a>的样式
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <script type="text/javascript" src="jquery.min.js"></script>
- <style>
- .btn {
- color: blue;
- background-color: #FFFFFF;
- border: 0px none; //去边框
- font-family: "宋体";
- font-size: 15px;
- text-decoration:underline; //加下划线
- }
- .btn:hover{
- color:red;
- border: none;
- cursor: hand;
- cursor: pointer;
- text-decoration:underline; //加下划线
- }
- .btn:focus {
- outline: none; //去边框
- }
- </style>
- <script type="text/javascript">
- $(function(){
- $("input:button").click(function() {
- str = $(this).val()=="编辑"?"确定":"编辑";
- $(this).val(str); // 按钮被点击后,在“编辑”和“确定”之间切换
- $(this).parent().siblings("td.'.2-item'").each(function() { // 获取当前行的其他单元格
- obj_text = $(this).find("input:text"); // 判断单元格下是否有文本框
- if(!obj_text.length) // 如果没有文本框,则添加文本框使之可以编辑
- $(this).html("<input type='text' value='"+$(this).text()+"'>");
- else // 如果已经存在文本框,则将其显示为文本框修改的值
- $(this).html(obj_text.val());
- });
- $(this).parent().siblings("td.'.1-item'").each(function() { // 获取当前行的其他单元格
- obj_text = $(this).find("select"); // 判断单元格下是否有文本框
- if(!obj_text.length) // 如果没有文本框,则添加文本框使之可以编辑
- $(this).html("<select><option value='volvo'>Volvo</option><option value='volvo'>Volvo</option></select>");
- else // 如果已经存在文本框,则将其显示为文本框修改的值
- $(this).html(obj_text.val());
- });
- });
- });
- </script>
- </head>
- <body>
- <table>
- <tr>
- <td>2</td>
- <td class="1-item">1</td>
- <td class="2-item">2</td>
- <td class="2-item">2</td>
- <td><input class="btn" type="button" value="编辑"></td>
- </tr>
- <tr><td>2</td><td>5</td><td><input type="button" name="btnSubmit" id="btnSubmit" value="编辑"></td></tr>
- <tr><td>3</td><td>8</td><td><input type="button" value="编辑"></td></tr>
- <tr><td>4</td><td>2</td><td><input type="button" value="编辑"></td></tr>
- </table>
- </body>
- </html>
注:样式实现的功能:按钮变成超链接。其他代码是可编辑table,如果不可行可能是引用的
- <strong><span style="font-size:18px;">jquery.min.js版本问题</span></strong>
HTML篇之CSS样式:<button></button>按钮变成超链接<a></a>的样式的更多相关文章
- Bootstrap全局CSS样式之button和图片
.btn-default--button的默认样式. .btn-primary--button的首选样式: .btn-success--button的成功样式: .btn-info--button的一 ...
- 纯CSS打造好看的按钮样式
好看的按钮.链接.div样式,效果预览: http://hovertree.com/code/run/css/s8o19792.html 发现今天积分和排名不错: 代码如下: <!DOCTYPE ...
- JavaFX桌面应用开发-Button(按钮)与事件
1:Button样式的操作原始代码: package application; import javafx.application.Application;import javafx.scene.Gr ...
- 第九篇、微信小程序-button组件
主要属性: 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 效果图: ml: <!--默认的but ...
- 【Android开发日记】之入门篇(十四)——Button控件+自定义Button控件
好久不见,又是一个新的学期开始了,为什么我感觉好惆怅啊!这一周也发生了不少事情,节假日放了三天的假(好久没有这么悠闲过了),实习公司那边被组长半强制性的要求去解决一个后台登陆的问题,结果就是把 ...
- input,button制作按钮IE6,IE7点击时1px黑边框的解决方法
按钮在IE6中点击时1px黑边框的最常见的解决方法 首先设置按钮为none,然后在按钮外面套一层来实现边框的效果,部分代码如下 .btnbox{ border:solid 1px red;} .btn ...
- web前端篇:CSS使用,样式表特征,选择器
目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...
- 隐藏一个button的方法(2种) 写出一个button的按钮(2种)
display:none;visibility:hidden: <input type = button><button>这是一个按钮 </button>
- WPF自定义控件与样式(2)-自定义按钮FButton
一.前言.效果图 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 还是先看看效果 ...
随机推荐
- 使用ueditor的时候,style样式传递到后台时被过滤没了
在项目中,使用ueditor的时候,style样式传递到后台时被过滤没了 转:https://www.cnblogs.com/theroad/p/5761743.html 经过chrome的一番调试后 ...
- 基于MFC的ActiveX控件开发教程------------浏览器插件之ActiveX开发
浏览器插件之ActiveX开发(一) 一般的Web应用对于浏览器插件能不使用的建议尽量不使用,因为其涉及到安全问题以及影响用户安装(或自动下载注册安装)体验问题.在有特殊需求(如涉及数据安全的金融业务 ...
- gt_argmax_overlaps = overlaps.argmax(axis=0) ValueError: attempt to get argmax of an empty sequence错误处理
在faster rcnn内进行随机裁剪数据增强,训练一段时间后报错: gt_argmax_overlaps = overlaps.argmax(axis=0) ValueError: attempt ...
- JS定义一个立即执行的可重用函数
我定义了一个函数表达式 testFun var testFun = (function() { ... //函数内容})(); 测试结果:虽然 testFun 函数有如愿在页面加载后立即被执行,但再次 ...
- 如何通过编译Linux内核打开IPVS(LVS)的debug模式
前言 为了定位keepalived VIP的问题, 一步一步定位到IPVS, IPVS默认是没有打开Debug模式的, 若需要打开Debug模式需要重新编译IPVS模块加载后才行, 最好的方式当然是仅 ...
- google 与服务器搭建
一.申请账号 二.创建实例 VPN设置 :https://juejin.im/post/5b665a51f265da0f7d4f1ab3
- vue组件库(五):icon管理
图标管理 前言 一.常用图标库网站 1.http://icomoon.io 阿里巴巴矢量图 身边的 2.http://fontawesome.dashgame.com iconmoon 3.http: ...
- 【C++ Primer 第10章】再探迭代器
反向迭代器 • 反向迭代器就是在容器中从尾元素向首元素反向移动的迭代器.对于反向迭代器,递增(以及递减)操作的含义会颠倒过来. • 递增一个反向迭代器(++it)会移动到前一个元素:递减一迭代器(-- ...
- C#编码、解码
1.HttpUtility.UrlEncode 方法: 对 URL 字符串进行编码,以便实现从 Web 服务器到客户端的可靠的 HTTP 传输.重载列表: [1]将字节数组转换为已编码的 URL 字符 ...
- python selenium-webdriver 元素定位(三)
上两篇的博文中介绍了python selenium的环境搭建和编写的第一个自动化测试脚本,从第二篇的例子中看出来再做UI级别的自动化测试的时候,有一个至关重要的因素,那就是元素的定位,只有从页面上找到 ...