作业练一练-表格隔行换色和表格的某些行高亮和改变颜色

需求:

  1. 首行文字居中,修改字体颜色
  2. 最后一行设置红色
  3. 设置前面两行样式
  4. 排除首尾,设置倒数第二行样式
  5. 表格隔行变色
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm14.aspx.cs" Inherits="WebApplication1.WebForm14" %>

<!DOCTYPE html>

<html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="[http://libs.baidu.com/jquery/1.8.3/jquery.min.js](http://libs.baidu.com/jquery/1.8.3/jquery.min.js)"></script>
    <script type="text/javascript">
        $(function () {
            //首行居中,字体蓝色
            $("tr:first").css({ "text-align": "center", "color": "blue" });
            //最后一行红色
            $("tr:last").css("color", "red");
            //前面两行背景黄色
            $("tr:lt(2)").css("background-color", "#ff0");
            //排除首尾,倒数第二行
            $("tr:not(:first):not(:last):eq(-2)").css("background-color", "#9cf");
            //隔行变色 偶数行背景浅灰
            $("tr:even").css("background-color", "#eee");
        });
    </script>
</head>
<body>
    <table style="width:400px;" border="1">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>城市</td>
        </tr>
        <tr>
            <td>1</td>
            <td>樊胜美</td>
            <td>顺德</td>
        </tr>
        <tr>
            <td>2</td>
            <td>安迪</td>
            <td>广州</td>
        </tr>
        <tr>
            <td>3</td>
            <td>小蚯蚓</td>
            <td>上海</td>
        </tr>
        <tr>
            <td>4</td>
            <td>关关</td>
            <td>哈尔滨</td>
        </tr>
        <tr>
            <td>5</td>
            <td>曲筱绡</td>
            <td>北京</td>
        </tr>
    </table>
</body>
</html>
Code language: HTML, XML (xml)

说明:

  • tr:first:选中表格第一行
  • tr:last:选中表格最后一行
  • tr:lt(2):选取索引小于2的前两行
  • :not():排除指定元素
  • tr:even:索引偶数行实现隔行变色(索引从0开始)

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注