使用jQuery操作表格

最新推荐文章于 2022-05-04 20:14:35 发布

吴默涵1

最新推荐文章于 2022-05-04 20:14:35 发布

阅读量334

点赞数

本文链接：https://blog.csdn.net/wu964521/article/details/103227514

版权

6.3.1控制表格颜色
1、隔行换色
实现表格的隔行换色首先要为表格的奇数行和偶数行设定样式，
例、jQuery样式

 <script>
   $(function(){
   $("tr:odd").addClass("odd");
   $("tr:even").addClass("even");
   })
  
  </script>

文件代码

 <body>
  <table border="1" align="center">
   <caption>javascript开发非常之旅套系图书</caption>
   <thead bgcolor="#FF0000" align="center" valign="bottom">
    <tr>
     <th>书名</th>
     <th>出版单位</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td width="185">javascript从入门到精髓</td>
     <td width="220">吉林省明日科技有限公司</td>
    </tr>
    <tr>
     <td>javascript自学视频教程</td>
     <td>吉林省明日科技有限公司</td>
    </tr>
    <tr>
     <td>javascript程序设计</td>
     <td>吉林省明日科技有限公司</td>
    </tr>
    <tr>
     <td>javascript自学视频教程</td>
     <td>吉林省明日科技有限公司</td>
    </tr>
    <tr>
     <td>javascript程序设计</td>
     <td>吉林省明日科技有限公司</td>
    </tr>
   </tbody>
  </table>

css样式

 <style>
   .odd{
    background: #FF0000;
   }
   .even{
    background: yellow;
   }
  </style>

2、控制表格行的高亮显示
实现表格莫一行的高亮显示，可以使用contains选择器实现。
代码：

$("tr:contains('程序设计')").addClass("selected");

例

 <script type="text/javascript">
  $(document).ready(function(){
   //$("tr:contains('程序设计')").addClass("selected");
   $("tbody>tr").click(function(){
    //使鼠标单击的行高亮显示,并且清除其兄弟元素的行高
    $(this).addClass("selected").siblings().removeClass("selected");
    //siblings()方法返回被选元素的所有同级元素,同级元素是共享相同父元素的元素。  
    })
  })
 </script>

siblings()方法返回被选元素的所有同级元素，所以意思就是为当前元素添加样式，并去除其他同级元素的样式。
6.3.2表单的展开与关闭
toggle() 方法切换元素的可见状态。所以意思就是为当前元素切换样式，且返回当前分类行的子元素，进而设置子元素的展开与收缩效果

 <script type="text/javascript">
  $(function(){
   $("tr.type").click(function(){//获取分类父行
   //获取本分类下的行元素
    $(this).toggleClass("selected").siblings(".line_"+this.id).toggle();
   })
  })
 </script>

6.3.3表单内容筛选
filter()方法实现对表格内容的过滤
1、html代码，创建表格，在表头增加搜索框。
例：

   <table border="1" width="260" align="center">
    <thead align="center" valign="bottom">
     <tr>
      <td colspan="2">搜索:<input type="text" name="keyword" id="keyword" /> </td>
     </tr>
     <tr bgcolor="#B2B2B2">
      <td>姓名</td>
      <td>成绩</td>
     </tr>
    </thead>
    <tbody align="center" bgcolor="#FFFF88">
     <tr>
      <td>王帅</td>
      <td>97</td>
     </tr>
     <tr>
      <td>李雷</td>
      <td>91</td>
     </tr>
     <tr>
      <td>高天</td>
      <td>97</td>
     </tr>
     <tr>
      <td>赵卫</td>
      <td>84</td>
     </tr>
     <tr>
      <td>王强</td>
      <td>97</td>
     </tr>
     <tr>
      <td>陈美</td>
      <td>99</td>
     </tr>
    </tbody>
   </table>

2、实现当键盘按键被松开时，如果文本框内容不为空，则筛选包含文本框内容的行。

  <script type="text/javascript">
   $(function(){
    $("#keyword").keyup(function(){
     if($("#keyword").val()!=""){
      //显示指定元素
      $("table tbody tr").hide().filter(":contains("+($(this).val())+")").show();
     }
    })
   })
  </script>

6.2.5表单验证
例：

  <form>
   <h3 align="center">用户注册</h3>
   <div class="dt">用户名：<input type="text" id="username" name="username" class="required" size="20"/></div>
   <div class="dt">密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="password" id="paw" name="paw" class="required" size="20"/></div>
   <div class="dt">性&nbsp;&nbsp;&nbsp;&nbsp;别：<input type="text" id="xb" name="xb" size="4"/></div>
   <div class="dt">年&nbsp;&nbsp;&nbsp;&nbsp;龄：<input type="text" id="nl" name="nl" size="4"/></div>
   <div class="dt"><input type="submit" name="sub" value="注册"></div>
  </form>
  <script type="text/javascript">
   $(function(){
    $("form :input.required").each(function(){
     var $required = $("<strong class='star'>*<strong>");
     $(this).parent().append($required);
    })
    $("form :input").blur(function(){
     if($(this).is("#username")){
      if($(this).val()==""){
       alert("用户名不能为空");
      }
     }
     if($(this).is("#paw")){
      if($(this).val()==""){
       alert("密码不能为空");
      }
      if(this.value.length<8){
       alert("密码不能小于八");
      }
     }
    })
   })
  </script>

css样式

  <style>
   .star{
    color: red;
   }
   .dt{
    padding-top: 10PX;
   }
  </style>

实现：用户名、密码不能为空，且密码不能少于8位。
注意：from 在寻找中中间需空格

吴默涵1

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
使用jQuery操作表格

6.3.1控制表格颜色1、隔行换色实现表格的隔行换色首先要为表格的奇数行和偶数行设定样式，例、jQuery样式 <script> $(function(){ $("tr:odd").addClass("odd"); $("tr:even").addClass("even"); }) </script>文件代码 <body...
复制链接

扫一扫