双色表格的制作

echo---a

已于 2023-07-19 19:14:40 修改

阅读量197

点赞数

分类专栏： JavaScript 文章标签： javascript css html

于 2023-05-31 13:56:56 首次发布

本文链接：https://blog.csdn.net/h149121/article/details/130967451

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>双色表格</title>
    <style type="text/css">
      h1 {
        color: #063;
        font-weight: bold;
        font-family: "黑体";
        text-align: center;
      }
      .datalist {
        border: 1px solid #007108;
        background-color: #d9ffdc;
        font-size: 14px;
        border-collapse: collapse;
        width: 800px;
        margin: 0px auto;
      }
      .datalist td {
        border: 1px solid #007108;
        text-align: center;
        line-height: 20px;
        padding: 4px 10px;
      }
      .tableHeader {
        background: #00a40c;
        color: #fff;
        font-weight: bold;
      }
      .evenStyle {
        background-color: #a5e5aa;
      }
      .over {
        background-color: #ff9;
      }
    </style>
    <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        $("table.datalist tr:first").addClass("tableHeader");
        $("table.datalist tr:even:not(:first)").addClass("evenStyle");
        $("table.datalist tr:not(:first)")
          .mouseover(function () {
            $(this).addClass("over");
          })
          .mouseout(function () {
            $(this).removeClass("over");
          });

        $("#p-list li:nth-child(0)").hide();
      });
    </script>
  </head>

  <body>
    <h1>学生信息表</h1>
    <table
      width="100%"
      border="0"
      cellspacing="0"
      cellpadding="0"
      class="datalist"
    >
      <tr>
        <td>学号</td>
        <td>姓名</td>
        <td>性别</td>
        <td>年龄</td>
        <td>电话号码</td>
      </tr>
      <tr>
        <td>20141201</td>
        <td>陈奕炫</td>
        <td>男</td>
        <td>18</td>
        <td>13882424456</td>
      </tr>
      <tr>
        <td>20141202</td>
        <td>李伟涛</td>
        <td>男</td>
        <td>19</td>
        <td>13882424457</td>
      </tr>
      <tr>
        <td>20141203</td>
        <td>卢志宏</td>
        <td>男</td>
        <td>18</td>
        <td>13882424461</td>
      </tr>      
    </table>
  </body>
</html>