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

最新推荐文章于 2024-07-23 08:26:05 发布

别样的风采是我

最新推荐文章于 2024-07-23 08:26:05 发布

阅读量1.8w

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_16769857/article/details/52055349

版权

HTML 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

<!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>

别样的风采是我

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML篇之CSS样式：<button></button>按钮变成超链接<a></a>的样式

注：样式实现的功能：按钮变成超链接。其他代码是可编辑table，如果不可行可能是引用的jquery.min.js版本问题
复制链接

扫一扫

专栏目录