1.可编辑表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
ul,li{
list-style: none;
}
h1{
margin-left: 300px;
}
table{
width: 800px;
margin: 40px;
border-collapse:collapse;
}
thead{
background: grey;
color: #fff;
}
th{
height: 45px;
}
td{
text-align: center;
color: #fff;
border:1px solid #fff;
height: 35px;
width: 75px;
}
.Int{
text-align: center;
color: #fff;
border:1px solid red;
border-width: 0 1px;
height: 35px;
width: 75px;
background: #1b76ee;
font-size: 15px;
}
tr{
background:#1b76ee;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="app">
<h1>点击就能编辑表格</h1>
<table>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
</tr>
<tr>
<td>4</td>
<td>范冰冰</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$td = $("td");
$td.on("dblclick",function(){
$reHTML =$(this).html();
var $input =$('<input type="text" name="" class="Int">');
$input.val($reHTML);
$input.select();
$(this).html($input);
// $(this).append('<input type="" name=""class="Int">')
var that =this;
$(".Int").focus().on("blur",function(){
if(this.value!=""){
var $HTML =this.value;
$(this).remove();
$(that).html($HTML);
}else{
$(this).remove();
$(that).html($reHTML)
}
})
return false;
})
</script>
</body>
</html>
2.下拉栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
ul,li{
list-style: none;
}
ul{
margin-top: 50px;
}
li{
opacity:0;
width:0;
height:0;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="app">
<ul>
<span>菜单栏1</span>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<span>菜单栏2</span>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul>
<span>菜单栏3</span>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script type="text/javascript">
$("span").hover(function(){
$("li").animate({
opacity:0,
width:0,
height:0,
},500,'linear');
$(this).siblings().animate({
opacity:100,
width:50,
height:50,
},1000,'linear')
},function(){
$(this).siblings().animate({
opacity:0,
width:0,
height:0,
},500,'linear')
})
</script>
</body>
</html>