您的位置：首页 > Web前端 > JQuery

用jQuery给表格添加样式

2016-03-26 16:13 645 查看
<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航