ASP.NET jQuery简单过滤选择器应用举例---为HTML表格设置外观样式

最新推荐文章于 2021-05-31 09:07:05 发布

忧郁三角龙ଲ

最新推荐文章于 2021-05-31 09:07:05 发布

阅读量154

点赞数

分类专栏： ASP.NET

本文链接：https://blog.csdn.net/weixin_45894701/article/details/115532613

版权

jQuery HTML表格 CSS样式 JavaScript DOM操作

关键词由CSDN通过智能技术生成

ASP.NET 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

①Default.aspx文件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 id="Head1" runat="server">
    <title></title>
    <script src="jquery.js" type="text/javascript"></script>
</head>

<body>
    <form id="form1" runat="server">
   <div>
        <table style="width:300px">
            <tr><td>草帽海贼团</td><td>性别</td><td>年龄</td></tr>
            <tr><td>路飞</td><td>男</td><td>19</td></tr>
            <tr><td>索隆</td><td>男</td><td>21</td></tr>
             <tr><td>娜美</td><td>女</td><td>20</td></tr>
             <tr><td>乔巴</td><td>男</td><td>17</td></tr>
            <tr><td>布鲁克</td><td>男</td><td>90</td></tr>                     
        </table>
      </div>
      
      <script type="text/javascript">
          $(function () {  
              $("table tr:first").css("background-color", "gray"); //表格第一行背景色为灰色
              $("table tr:eq(2)").css({ "font-style": "italic", "color": "red" }); //正文第二行文本为斜体，红色
              $("table tr:odd").css("background-color", "#DDDDDD"); //偶数行背景色为"#DDDDDD"
              $("table tr:not(first)").css("font-size", "11pt");  //除第一行外所有行字号为11pt
              $(":root").css("background-color", "#EFEFEF");  //整个文档背景色为"#EFEFEF"
          });     
      </script>
    </form>
</body>
</html>