jq-表格操作

最新推荐文章于 2023-10-13 11:16:05 发布
最新推荐文章于 2023-10-13 11:16:05 发布
阅读量923 收藏
点赞数
分类专栏： jq
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cq_xiaoma/article/details/8952115
版权 
<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <title>表格</title>
    <style type="text/css">
     table thead tr th{border-bottom:1px solid #F9C;}
  table{border:1px solid #000;}
  table td{ width:100px;}
  .even{background:#fff38f;}
  .odd{background:#ffffee;}
  .selected{background:#0F0;}
  .p{cursor:pointer; background:#ccc;}
    </style>
    <script type="text/javascript">
  $(function(){
    //1.
    $("#tb1 tbody>tr:odd").addClass("odd");
    $("#tb1 tbody>tr:even").addClass("even");
    //$("tr:contains('张山5')").addClass("selected");
    
    //2.
    $("#tb1 tbody>tr").click(function(){
      $(this)
      .addClass("selected")
      .siblings().removeClass("selected")
      .end()
      .find(":radio").attr("checked",true);
     });
    $("#tb1 :radio:checked").parent().parent().addClass("selected");
    
    //3.
    $("#tb2 tbody>tr").click(function(){
      //3.1
      //if($(this).hasClass("selected")){
       //$(this).removeClass("selected").find(":checkbox").attr("checked",false); 
      //}else{
       //$(this).addClass("selected").find(":checkbox").attr("checked",true);
      //}
      //3.2
      var hasSelectd = $(this).hasClass("selected");
      $(this)[hasSelectd?"removeClass":"addClass"]("selected").find(":checkbox").attr("checked",!hasSelectd);
     });
    $("#tb2 :checkbox:checked").parent().parent().addClass("selected");
    
    //4.
    var $par = $("#tb3 tbody .p");
    $par.click(function(){
      $par.parent().find("."+this.id).toggle();
     });
    
    //5.
    $("#filterName").keyup(function f(){
      $("#tb3 tbody tr")
       .hide()
       .filter(":contains('"+$(this).val()+"')").show();
     });
   });
 </script>
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" id="tb1">
 <thead>
     <tr><th></th><th>姓名</th><th>性别</th><th>地址</th></tr>
    </thead>
    <tbody>
     <tr>
        <td><input name="items" type="radio" checked="checked"/></td>
        <td>张山1</td><td>男</td><td>浙江</td>
        </tr>
        <tr>
        <td><input name="items" type="radio" /></td>
        <td>张山2</td><td>男</td><td>浙江</td>
        </tr>
        <tr>
        <td><input name="items" type="radio" /></td>
        <td>张山3</td><td>男</td><td>浙江</td>
        </tr>
        <tr>
        <td><input name="items" type="radio" /></td>
        <td>张山4</td><td>男</td><td>浙江</td>
        </tr>
        <tr>
        <td><input name="items" type="radio" /></td>
        <td>张山5</td><td>男</td><td>浙江</td>
        </tr>
        <tr>
        <td><input name="items" type="radio" /></td>
        <td>张山6</td><td>男</td><td>浙江</td>
        </tr>
    </tbody>
</table>
<br /><br /><br />
<table border="0" cellpadding="0" cellspacing="0" id="tb2">
 <thead>
     <tr><th></th><th>姓名</th><th>性别</th><th>地址</th></tr>
    </thead>
    <tbody>
     <tr>
        <td><input name="items" type="checkbox" checked="checked"/></td>
        <td>张山1</td><td>男</td><td>浙江</td>
        </tr>
        <tr>
        <td><input name="items" type="checkbox" /></td>
        <td>张山2</td><td>男</td><td>浙江</td>
        </tr>
        <tr>
        <td><input name="items" type="checkbox" /></td>
        <td>张山3</td><td>男</td><td>浙江</td>
        </tr>
        <tr>
        <td><input name="items" type="checkbox" /></td>
        <td>张山4</td><td>男</td><td>浙江</td>
        </tr>
        <tr>
        <td><input name="items" type="checkbox" /></td>
        <td>张山5</td><td>男</td><td>浙江</td>
        </tr>
        <tr>
        <td><input name="items" type="checkbox" /></td>
        <td>张山6</td><td>男</td><td>浙江</td>
        </tr>
    </tbody>
</table>
<br /><br /><br />
<label for="filterName">筛选：</label>
<input type="text" id="filterName" />
<table border="0" cellpadding="0" cellspacing="0" id="tb3">
 <thead>
     <tr><th>姓名</th><th>性别</th><th>地址</th></tr>
    </thead>
    <tbody>
     <tr class="p" id="p1">
        <td colspan="3">男</td>
        </tr>
     <tr class="p1">
        <td>张山1</td><td>男</td><td>浙江</td>
        </tr>
     <tr class="p1">
        <td>张山1</td><td>男</td><td>浙江</td>
        </tr>
        <tr class="p1">
        <td>张山2</td><td>男</td><td>浙江</td>
        </tr>
        <tr class="p" id="p2">
        <td colspan="3">女</td>
        </tr>
        <tr class="p2">
        <td>张山4</td><td>女</td><td>浙江</td>
        </tr>
        <tr class="p2">
        <td>张山5</td><td>女</td><td>浙江</td>
        </tr>
        <tr class="p2">
        <td>张山6</td><td>女</td><td>浙江</td>
        </tr>
    </tbody>
</table>
</body>
</html>

夏末丶拾忆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery表格Table操作-获取表格数据/向表格填充数据
qq_47189438的博客
06-30 1652
使用JQuery获取表格数据/向表格填充数据
用jQuery写一个表格
yesir_mao的博客
06-18 7382
需求：用jQuery动态生成一个表格 说明：jQuery版本为：jquery-1.11.3.js 步骤如下： 1.先创建一个表头： </tbody> </table> # FirstName LastName ...
jquery的表格组件-dataTables的基本使用
Artisan_w
10-13 4283
jQuery DataTables 是一个功能丰富且灵活的 jQuery 插件，用于创建交互式的数据表格，提供搜索、排序、分页、筛选等功能，以便更好地展示和管理数据。通过使用 jQuery DataTables，你可以轻松地将数据集转换为易于浏览和交互的表格，而无需手动编写大量的 HTML 和 JavaScript 代码。它具有广泛的配置选项和扩展，使你能够适应不同的数据源和显示需求。
Jquery 表格制作 编辑、删除 、添加功能
清风且从容，何需念君安。
05-26 1302
【代码】Jquery 表格制作 编辑、删除 、添加功能。
案例：jQuery动态创建表格（完整代码）
m0_65085680的博客
10-11 1520
案例：jQuery动态创建表格（完整代码）
jq-表格排序插件
12-11
本项目名为"jq-表格排序插件"，正如其标题所示，是一个专为表格数据排序设计的轻量级插件。这个插件只关注核心功能——表格排序，避免了额外的复杂性，确保了高效且简洁的实现。 首先，我们需要理解jQuery是如何与...
jq-extgrid表格插件
08-26
总的来说，jq-extgrid表格插件以其强大的功能和灵活的配置，为Web开发中的数据展示和操作提供了便利，是jQuery生态中的一个重要组成部分。通过深入了解和实践，开发者能够充分利用其特性，提升项目的数据管理效率和...
jquery插件--表格分页
03-29
jQuery提供了一种简洁的API，让DOM操作、事件处理、动画制作和Ajax交互变得容易。 2. 表格分页概念：表格分页是将大量数据分段显示在多个页面上，用户可以逐页浏览，避免一次性加载过多数据导致页面响应慢或用户...
jquery 操作表格
04-05
7. **插件扩展**：jQuery有许多用于表格操作的插件，如Datatables，它可以提供排序、过滤、分页等功能。虽然提供的文件没有直接提及插件，但了解这些插件对于理解jQuery表格操作的高级用法是有帮助的。 通过这些...
jq弹性表格控件
10-25
**jq弹性表格控件**，也被称为`tilesjs`，是一种基于jQuery的高效、灵活的表格展示解决方案。这种控件的主要特点是能够自动伸缩，适应表格数据量的变化，为用户提供流畅的浏览体验。在Web应用中，特别是在数据密集型...
jquery实现动态生成表格
11-13
数据展示时候，经常从后台传入大小不等的矩阵。这里给出了根据不同矩阵大小，通过jquery的html()和append(）方法动态生成html表格的实例。
jquery实现生成表格
04-10
在页面输入行和列点击按钮自动生成相应的表格，并且还可以对表格出入数据
jquery 操作动态表格(原)
03-20
NULL 博文链接：https://jsufly.iteye.com/blog/758925
4jquery对表格表单的操作
12-06
简洁的语法和跨平台的兼容性，极大的简化了javascript开发人员遍历HTML文档、操作DOM、处理事伯、执行动画操作AJAX的操作。 屏蔽浏览器差异，对DOM的操作提供了方便的扩展，易用的事件处理API和动画API数据接口。
jquery操作表格
wyqwilliam的博客
12-15 416
<html> <head> <title>jQuery操作表格</title> <meta charset="UTF-8"/> <!--声明css代码域--> <style type="text/css"> tr{ height: 40px; } </style&g...
【小河今学 | JavaScript+jQuery】JQ插件开发练习之数据表格插件
LB_laber的博客
08-11 298
JQ插件开发
jqGrid (数据表格)
翰萨姆的博客
08-12 2118
jqGrid (数据表格) 1.使用jqgrid数据表格 1). 环境搭建 官方下载: http://www.trirand.com/blog/ 中文网下载: http://blog.mn886.net/jqGrid/ 2). 如何使用 1.解压压缩包 核心文件夹: jqgrid 2.页面中使用 引入jqgrid中核心css 引入jqgrid中国际化语言文件 引入jqgrid中核心js文件 <link rel="stylesheet" href="${app}
JQuery实现动态表格(添加、删除、遍历)
热门推荐
你好啊cbw
03-06 1万+
遍历表格逻辑 1.浏览器会自动把所有行tr使用tbody标签包裹起来 2.使用childern()获取当前元素的所有儿子标签 3.table表格需要两个childern才能获取到所有tr行，若一个childern只能获取到tbody，即$("#myTable").childern().childern() 4.遍历每行，每行元素trObject调用childern()获取每行的所有单元格(列)集合，时刻将js对象转成jq对象。 5.遍历每个单元格，使用Htm()获取每个单元格内容存入字符串变量st
jQuery对表格的操作
weixin_30682127的博客
08-20 151
1.表格变色 （1）普通的隔行变色 CSS代码： .even{background:#fff;} //偶数行样式 .even{background:#fff;} //奇数行样式 ①包括表头 $(function(){ $("tr:odd").addClass("odd"); $("tr:even").addClass("even"); ...
jq导出的excel表格 导出excel有下选框
最新发布
11-01
在代码中，可以通过绑定下载按钮的click事件来触发导出操作，同时可以设置Excel文件的名称和格式等参数。导出时，会弹出一个选框，用户可以选择导出的文件格式。 --相关问题--: 1. jQuery导出Excel的优缺点有哪些...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值