用jQuery制作一个美观的表格

最新推荐文章于 2018-06-11 18:57:00 发布

zjx102938

最新推荐文章于 2018-06-11 18:57:00 发布

阅读量544

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zjx102938/article/details/8124071

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

第一次用jQuery，希望自己能越做越好，新人拿走，老鸟无视

试题：

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.even
{ background:#F8FBFE;} 

.odd
{ background:#EEF0F7;} 

.borderstyle
{
	border-bottom: 1px solid #FFF;
	border-left: 1px solid #FFF;
	font-size: 12px;
	line-height: 180%;
	font-family: Arial, Helvetica, sans-serif;
}

.tbfont
{ text-align:center;
  font-size:100%;
  font-weight:normal}

</style>
<SCRIPT type=text/javascript src="../css/jquery-1.8.2.js"></SCRIPT>
<script type="text/javascript">
$(function(){
	$("#search tbody > tr:odd").addClass("odd");
	$("#search tbody > tr:even").addClass("even");
})
</script>
<title>jQuery添加表格隔行换色</title>
</head>
<body>
        <table id="search" cellspacing="0" cellpadding="0" width="700" align="center" border="0" class="tbfont">
        		<thead>			
                <tr bgcolor="#CAE8EA">
                      <td width="76" height="25" class="borderstyle">序号</td>
                      <td width="201" height="25" class="borderstyle">登录帐号</td>
                      <td width="203" height="25" class="borderstyle">人员姓名</td>
                      <td width="214" height="25" class="borderstyle">登录时间</td>
                    </tr>    
                </thead>         
                 <tbody>
                  <tr class="borderstyle">
                    <td class="borderstyle">1</td>
                    <td class="borderstyle">zhangsan</td>
                    <td class="borderstyle">张三</td>
                    <td class="borderstyle">2012-10-26 09:23:56 </td>
                  </tr>
                  <tr>
                    <td class="borderstyle">2</td>
                    <td class="borderstyle">lisi</td>
                    <td class="borderstyle">李四</td>
                    <td class="borderstyle">2012-10-26 09:23:56</td>
                  </tr>
                  <tr>
                    <td class="borderstyle">3</td>
                    <td class="borderstyle">wangwu</td>
                    <td class="borderstyle">王五</td>
                    <td class="borderstyle">2012-10-26 09:23:56 </td>
                  </tr>
                                    <tr>
                    <td class="borderstyle">4</td>
                    <td class="borderstyle">zhaoliu</td>
                    <td class="borderstyle">赵六</td>
                    <td class="borderstyle">2012-10-26 09:23:56 </td>
                  </tr>
                   <tr>
                    <td class="borderstyle">5</td>
                    <td class="borderstyle">chengqi</td>
                    <td class="borderstyle">陈七</td>
                    <td class="borderstyle">2012-10-26 09:23:56 </td>
                  </tr>
                   <tr>
                    <td class="borderstyle">6</td>
                    <td class="borderstyle">liuba</td>
                    <td class="borderstyle">刘八</td>
                    <td class="borderstyle">2012-10-26 09:23:56 </td>
                  </tr>
                  </tbody>
                </table>
</body>
</html>