我的jQuery笔记
1.去除td之间的间距
table{border-collapse:collapse;}
2.文字在td中居中显示
vertical-align : middle
3.居中显示
vertical-align : middle;
text-align:center;
4.常用效果总结
//jQuery实现奇偶行变色
$(function(){
$("#display tr:odd").addClass("trOdd");
//$("#display tr:even").addClass("trEven");
//jQuery实现鼠标滑过变色
$("#display tr").each(function(i){
$(this).mouseover(function(){
$(this).css("background","url('./image/img_list_acitve_1x30.png')");
});
$(this).mouseout(function(){
$(this).css("background","");
});
});
});
实例应用：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#display{
width:200px;
border:solid 1px #666;
}
#display tr{
line-height:23px;
background-color: #eee;
}
#display th{
background-color: #ccc;
color:#fff;
}
table{border-collapse:collapse;}
#display .trOdd{
background-color: #fff;
}
td{
text-align: center;
vertical-align : middle
}
</style>
<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
//jQuery实现奇偶行变色
$(function(){
$("#display tr:odd").addClass("trOdd");
//$("#display tr:even").addClass("trEven");
//jQuery实现鼠标滑过变色
$("#display tr").each(function(i){
$(this).mouseover(function(){
$(this).css("background","url('./image/img_list_acitve_1x30.png')");
});
$(this).mouseout(function(){
$(this).css("background","");
});
});
});
</script>
</head>
<body>
<div class="mainDiv">
<table id="display">
<tr>
<th>ID</th><th>name</th><th>age</th>
</tr>
<tr>
<td>1001</td><td>Tom</td><td>22</td>
</tr>
<tr>
<td>1002</td><td>Jack</td><td>32</td>
</tr>
<tr>
<td>1003</td><td>Hom</td><td>23</td>
</tr>
</table>
</div>
</body>
</html>
table{border-collapse:collapse;}
2.文字在td中居中显示
vertical-align : middle
3.居中显示
vertical-align : middle;
text-align:center;
4.常用效果总结
//jQuery实现奇偶行变色
$(function(){
$("#display tr:odd").addClass("trOdd");
//$("#display tr:even").addClass("trEven");
//jQuery实现鼠标滑过变色
$("#display tr").each(function(i){
$(this).mouseover(function(){
$(this).css("background","url('./image/img_list_acitve_1x30.png')");
});
$(this).mouseout(function(){
$(this).css("background","");
});
});
});
实例应用：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#display{
width:200px;
border:solid 1px #666;
}
#display tr{
line-height:23px;
background-color: #eee;
}
#display th{
background-color: #ccc;
color:#fff;
}
table{border-collapse:collapse;}
#display .trOdd{
background-color: #fff;
}
td{
text-align: center;
vertical-align : middle
}
</style>
<script src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
//jQuery实现奇偶行变色
$(function(){
$("#display tr:odd").addClass("trOdd");
//$("#display tr:even").addClass("trEven");
//jQuery实现鼠标滑过变色
$("#display tr").each(function(i){
$(this).mouseover(function(){
$(this).css("background","url('./image/img_list_acitve_1x30.png')");
});
$(this).mouseout(function(){
$(this).css("background","");
});
});
});
</script>
</head>
<body>
<div class="mainDiv">
<table id="display">
<tr>
<th>ID</th><th>name</th><th>age</th>
</tr>
<tr>
<td>1001</td><td>Tom</td><td>22</td>
</tr>
<tr>
<td>1002</td><td>Jack</td><td>32</td>
</tr>
<tr>
<td>1003</td><td>Hom</td><td>23</td>
</tr>
</table>
</div>
</body>
</html>