html表格示例——不同数据行高亮以及鼠标所在行高亮

<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js">script>
    <style type="text/css">
        table
        {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        td, th
        {
            border: 1px solid #cad9ea;
            height: 30px;
        }
        th
        {
            background-color: #CCE8EB;
            color: #666;
            width: 600px;
        }
        tbody>tr {
            background-color: #C8C8C8;
        }
        tr:hover {
            background-color: #ffa !important;
        }
        .different {
            background-color: #FF0000 !important;
            color: #00FF00 !important;
        }
    style>

    <script type="text/javascript">
        $(document).ready(function() {
            var i, flag = false;
            var rows = $("table").find("tr").length;
            var columns = $("table tbody tr:eq(0)").find("td").length;

            $('table tbody tr').each(function() {
                for (i = 0; i < columns - 1; ++i) {
                    if ($(this).find('td').eq(i).text() != $(this).find('td').eq(i + 1).text()) {
                        flag = true;
                        break;
                    }
                }
                if (flag == true) {
                    $(this).addClass("different");
                }
                flag = false;
            });
        });
    script>
head>
<body>
    <table>
        <thead><th>姓名th><th>张三th><th>李四th><th>王五th><th>老刘th><th>天七th>thead>
        <tbody>
        <tr><th>0th>   <td>01td> <td>02td>  <td>03td> <td>10td>  <td>10td>  tr>
        <tr><th>1th>   <td>04td> <td>10td>  <td>10td> <td>10td>  <td>10td>  tr>
        <tr><th>2th>   <td>10td> <td>10td>  <td>10td> <td>10td>  <td>10td>  tr>
        <tr><th>3th>   <td>10td> <td>10td>  <td>10td> <td>10td>  <td>10td>  tr>
        <tr><th>4th>   <td>10td> <td>10td>  <td>10td> <td>10td>  <td>10td>  tr>
        <tr><th>5th>   <td>10td> <td>10td>  <td>10td> <td>10td>  <td>10td>  tr>
        <tr><th>6th>   <td>10td> <td>10td>  <td>10td> <td>10td>  <td>10td>  tr>
        <tr><th>7th>   <td>10td> <td>10td>  <td>10td> <td>10td>  <td>10td>  tr>
        <tr><th>8th>   <td>10td> <td>10td>  <td>10td> <td>10td>  <td>10td>  tr>
        <tr><th>9th>   <td>10td> <td>10td>  <td>13td> <td>10td>  <td>10td>  tr>
        <tr><th>10th>   <td>10td> <td>10td>  <td>10td> <td>10td>  <td>10td> tr>
        <tr><th>11th>   <td>10td> <td>10td>  <td>10td> <td>10td>  <td>10td> tr>
        <tr><th>12th>   <td>10td> <td>10td>  <td>10td> <td>10td>  <td>10td> tr>
        <tr><th>13th>   <td>10td> <td>10td>  <td>10td> <td>14td>  <td>15td> tr>
        <tr><th>14th>   <td>10td> <td>10td>  <td>10td> <td>10td>  <td>10td> tr>
        <tr><th>15th>   <td>10td> <td>10td>  <td>10td> <td>10td>  <td>10td> tr>
        <tr><th>16th>   <td>10td> <td>10td>  <td>10td> <td>10td>  <td>10td> tr>
        <tr><th>17th>   <td>11td> <td>11td>  <td>11td> <td>11td>  <td>11td> tr>
        <tr><th>18th>   <td>10td> <td>10td>  <td>10td> <td>10td>  <td>10td> tr>
        <tr><th>19th>   <td>10td> <td>10td>  <td>10td> <td>10td>  <td>10td> tr>
        <tr><th>20th>   <td>10td> <td>10td>  <td>10td> <td>17td>  <td>10td> tr>
        <tr><th>21th>   <td>10td> <td>10td>  <td>10td> <td>10td>  <td>10td> tr>
        tbody>
    table>
body>
html>

最终效果如下图:
html表格示例——不同数据行高亮以及鼠标所在行高亮_第1张图片

你可能感兴趣的:(Web)