m.lom599.com_手机版乐白家网址_乐百家手机首页登录

jquery实现表格中点击相应行变色功能效果,基于

作者: 手机版乐白家网址  发布:2019-07-10

对于这个搜素框,我们为了更好的体验可以利用keyup事件实现在用户输入的时候就开始筛选,而不是填完以后点击搜索按钮再执行。
效果图:

"jQuery(elements)"函数的elemients参数还可以是jQuery对象,虽然讲一个jQuery对象在次转化没有意义,这是为了当不确定一个对象的类型是jQuery对象还是dom对象时,可以再次调用此函数进行转化,这样可以保证此对象一定是jQuery对象。

您可能感兴趣的文章:

  • jQuery动态生成不规则表格(前后端)
  • jQuery动态生成表格及右键菜单功能示例
  • JQuery 动态生成Table表格实例代码
  • jQuery动态生成Bootstrap表格
  • JQuery Ajax动态生成Table表格
  • Jquery 动态生成表格示例代码
  • jQuery实现多按钮单击变色
  • 用JQuery实现表格隔行变色和突出显示当前行的代码
  • jQuery代码实现表格中点击相应行变色功能
  • jQuery轻松实现表格的隔行变色和点击行变色的实例代码
  • jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
  • jQuery实现表格隔行及滑动,点击时变色的方法【测试可用】
  • jQuery实现动态生成表格并为行绑定单击变色动作的方法
<html>
<head>
 <meta charset="utf-8" />
 <script src="jquery-1.3.2.min.js"></script>
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 <script>
  $(function () {
   $("tr.parent").click(function () {
    $(this)
    .siblings('.child_' this.id).toggle();

   });
   $("tr.parent").addClass("selected");
   $("#searchbox").keyup(function () {
    $("table tbody tr").hide()
    .filter(":contains('" ($(this).val()) "')").show();//filter和contains共同来实现了这个功能。
   }).keyup();
  });
 </script>
 <title></title>
</head>
<body>
 <label>筛选</label>
 <input type="text" id="searchbox"/>
 <table>
  <thead>
   <tr><td>姓名</td><td>性别</td><td>暂住地</td></tr>
  </thead>
  <tbody>
   <tr class="parent" id="row_01"><td>前台设计组</td></tr>
   <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_01"><td>李山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_01"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="parent" id="row_02"><td>前台设计组</td></tr>
   <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_02"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="parent" id="row_03"><td>前台设计组</td></tr>
   <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
   <tr class="child_row_03"><td>张山</td><td>男</td><td>湖北</td></tr>
  </tbody>
 </table>
</body>
</html>

对于懒人有一个小窍门,如果不想记忆在不同的jQuery函数中的this到底是jQuery对象还是this对象,可以使用"this"方法都转化成jQuery对象,因为即使一个对象已经是jQuery对象也不会出错。

图片 1

您可能感兴趣的文章:

  • 基于JQuery的一句代码实现表格的简单筛选
  • 让你的CSS像Jquery一样做筛选的实现方法
  • JQuery操作表格(隔行着色,高亮显示,筛选数据)
  • jQuery筛选器children()案例详解(图文)
  • jquery表格内容筛选实现思路及代码
  • JQuery筛选器全系列介绍
  • Jquery仿淘宝京东多条件筛选可自行结合ajax加载示例
  • jquery遍历数组与筛选数组的方法
  • jquery遍历筛选数组的几种方法和遍历解析json对象
  • jquery实现多条件筛选特效代码分享

jQuery对象转换为dom对象

以上这篇jquery实现表格中点击相应行变色功能效果【实例代码】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

图片 2

var img=document.getElementById("myphoto");
jQuery(img).css("border","solid 2px #FF0000");

对于一个表格,为了使我们选中的项更容易区分,需要为选中项添加高亮,同时也需要,将其他项的高亮形式去除。类似于:

以上就是本文的全部内容,希望对大家学习jquery程序设计有所帮助。

Dom对象转化为jQuery对象

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta charset="utf-8" />
 <title></title>
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 <script src="jquery-1.3.2.min.js"></script>
 <script>
  $(function () {
   $('tbody>tr').click(function () {
    $(this).addClass('selected')  //为选中项添加高亮
    .siblings().removeClass('selected')//去除其他项的高亮形式
    .end();
   });
  }); 
 </script>
</head>
<body>
 <table>
  <thead>
   <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr>
  </thead>
  <tbody>
   <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
   <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
   <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
   <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
   <tr><td>张三</td><td>男</td><td>浙江宁波</td></tr>
  </tbody>
 </table>
</body>
</html>

实现代码:

以上两条语句是等同的。

当表格内的数据较多时,我们无法一页一页的查找,这时可以通过一个搜索框来实现搜索。

$("#myphoto")[0];

可以使用"$"代替"jQuery",因为在jQuery的内部有如下实现:

如果已经获得了一个dom对象,可以使用"jQuery(elements)"函数将其转化为jQuery对象:

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:jquery实现表格中点击相应行变色功能效果,基于

关键词: m.lom599.com