JQuery相关的效果
2016-03-27 19:50
423 查看
<!DOCTYPE html>
< html>
< head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.12.2.min.js"></script> //还要有个jquery-1.12.2.min.js文件。
< /head>
< body>
使用jquery实现下面的表格样式效果:
< ol>
<li>给表格加上边框,同时表格宽度800,内容居中</li>
<li>表格第一行文字加粗,背景色darkgreen</li>
<li>表格从第二行开始,奇数行和偶数行颜色要求不同</li>
<li>鼠标移动到表格中,除了第一行以外都有提示颜色,同时出现手型效果</li>
<li>点击某个内容行,可以把该行内容弹出显示</li>
< /ol>
< table>
<tr>
<th>序号</th><th>姓名</th><th>性别</th><th>电话</th><th>地址</th><th>备注</th>
</tr>
<tr>
<td>1</td><td>小李</td><td>女</td><td>13312345678</td><td>四川省成都市</td><td>没</td>
</tr>
<tr>
<td>2</td><td>小陈</td><td>女</td><td>13012345678</td><td>四川省成都市</td><td>无</td>
</tr>
<tr>
<td>3</td><td>张三</td><td>男</td><td>15312345678</td><td>四川省绵阳市</td><td>没啥</td>
</tr>
<tr>
<td>4</td><td>李四</td><td>男</td><td>14312345678</td><td>四川省德阳市</td><td>没啥</td>
</tr>
<tr>
<td>5</td><td>王五</td><td>女</td><td>18312345678</td><td>四川省成都市武侯区</td><td>没啥</td>
</tr>
<tr>
<td>6</td><td>小张</td><td>男</td><td>13912345678</td><td>四川省成都市</td><td>没啥</td>
</tr>
<tr>
<td>7</td><td>赵六</td><td>男</td><td>13812345678</td><td>四川省成都市</td><td>没啥</td>
</tr>
< /table>
< br/>
< script>
$(function(){
$("table").css({"border":"1px solid gray","width":"800px","text-align":"center",
"border-collapse":"collapse"});
$("table td,table th").css("border","1px solid gray");
$("table tr:first").css("background-color","darkgreen");
$("table tr:not(:first):even").css("background-color","blanchedalmond").hover(
function(){
$(this).css("background-color","orange");
},
function(){
$(this).css("background-color","blanchedalmond");
}
);
$("table tr:not(:first):odd").css("background-color","burlywood").hover(
function(){
$(this).css("background-color","orange");
},
function(){
$(this).css("background-color","burlywood");
}
);;
$("table tr:not(:first)").css("cursor","pointer").click(function(){
var info="";
var firsttds=$("table tr:first th");
$(this).children("td").each(function(i){
info+=firsttds.eq(i).html()+":"+this.innerHTML+",";
});
alert(info);
});
});
< /script>
< /body>
< /html>
< html>
< head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.12.2.min.js"></script> //还要有个jquery-1.12.2.min.js文件。
< /head>
< body>
使用jquery实现下面的表格样式效果:
< ol>
<li>给表格加上边框,同时表格宽度800,内容居中</li>
<li>表格第一行文字加粗,背景色darkgreen</li>
<li>表格从第二行开始,奇数行和偶数行颜色要求不同</li>
<li>鼠标移动到表格中,除了第一行以外都有提示颜色,同时出现手型效果</li>
<li>点击某个内容行,可以把该行内容弹出显示</li>
< /ol>
< table>
<tr>
<th>序号</th><th>姓名</th><th>性别</th><th>电话</th><th>地址</th><th>备注</th>
</tr>
<tr>
<td>1</td><td>小李</td><td>女</td><td>13312345678</td><td>四川省成都市</td><td>没</td>
</tr>
<tr>
<td>2</td><td>小陈</td><td>女</td><td>13012345678</td><td>四川省成都市</td><td>无</td>
</tr>
<tr>
<td>3</td><td>张三</td><td>男</td><td>15312345678</td><td>四川省绵阳市</td><td>没啥</td>
</tr>
<tr>
<td>4</td><td>李四</td><td>男</td><td>14312345678</td><td>四川省德阳市</td><td>没啥</td>
</tr>
<tr>
<td>5</td><td>王五</td><td>女</td><td>18312345678</td><td>四川省成都市武侯区</td><td>没啥</td>
</tr>
<tr>
<td>6</td><td>小张</td><td>男</td><td>13912345678</td><td>四川省成都市</td><td>没啥</td>
</tr>
<tr>
<td>7</td><td>赵六</td><td>男</td><td>13812345678</td><td>四川省成都市</td><td>没啥</td>
</tr>
< /table>
< br/>
< script>
$(function(){
$("table").css({"border":"1px solid gray","width":"800px","text-align":"center",
"border-collapse":"collapse"});
$("table td,table th").css("border","1px solid gray");
$("table tr:first").css("background-color","darkgreen");
$("table tr:not(:first):even").css("background-color","blanchedalmond").hover(
function(){
$(this).css("background-color","orange");
},
function(){
$(this).css("background-color","blanchedalmond");
}
);
$("table tr:not(:first):odd").css("background-color","burlywood").hover(
function(){
$(this).css("background-color","orange");
},
function(){
$(this).css("background-color","burlywood");
}
);;
$("table tr:not(:first)").css("cursor","pointer").click(function(){
var info="";
var firsttds=$("table tr:first th");
$(this).children("td").each(function(i){
info+=firsttds.eq(i).html()+":"+this.innerHTML+",";
});
alert(info);
});
});
< /script>
< /body>
< /html>
相关文章推荐
- jquery -ajax
- 关于jQuery绑定事件会叠加的解决和心得总结
- 【前端学习】【jQuery选择器】
- 初识JavaScript,Ajax,jQuery,并比较三者关系
- jquery重要知识点
- 日常问题记录--jquery中HTML元素本身固有属性用prop,自定义的DOM属性,在处理时,使用attr方法
- jQuery实时显示鼠标指针位置和键盘ASCII码
- 高版本jquery尤其是1.10.2的版本设置input radio设置值的最正确的姿势。
- web 复位<select>标签 jQuery用法
- jQuery
- Jquery-基础知识点
- ASP.NET中JQuery+AJAX调用后台
- swipe.js工具包实现手机web滑动轮播效果存在jQuery对象不能使用问题并解决(个人项目经验)
- jQuery异步框架探究3:jQuery.when方法
- jQuery选择器总结
- jQuery选择器
- jQuery 事件中stoppropagation和stopimmediatepropagation的区别
- jQuery 简单归纳总结
- jquery随笔小特效之唯品会顶部菜单栏
- jquery $(document).ready() 与window.onload的区别