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

时间：2017-03-12 23:43:46 阅读：270 评论：0 收藏：0 [点我收藏+]

原文：http://blog.csdn.net/qq_16769857/article/details/52055349

[html] view plain copy

print ?

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

[html] view plain copy

print ?

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

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

原文：http://www.cnblogs.com/langtianya/p/6539550.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)