Jquery 表格操作

最新推荐文章于 2017-12-22 18:02:00 发布
最新推荐文章于 2017-12-22 18:02:00 发布
阅读量245 收藏
点赞数
分类专栏： Jquery
<html lang="zh-cn">  
    <head>  
        <title>点击</title>  
        <meta content="IE=edge" http-equiv="X-UA-Compatible">  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        不要忘记引入jquey
        <script type="text/javascript">  
        $(function(){  
            //用jQuery获取table中td值  
            $("#mytable td").click(function(){  
                alert("table td值："+$(this).text());  
            });  
              
            //jQuery获取table中点击位置所在行的id  
            $("#mytable td").click(function() {  
                //td的id   
                alert($(this).attr("id"));  
                //tr的id    
                alert($(this).parent().attr("id"));  
            });  
        });  
        </script>  
    </head>  
    <body>  
    <table id="mytable" width="708px;" cellpadding="5" cellspacing="1">  
        <tbody>  
            <tr bgcolor="#DEE9F4" id="tr_1">  
                <td align="center"> 日</td>  
                <td align="center"> 一 </td>  
                <td align="center"> 二 </td>  
                <td align="center"> 三 </td>  
                <td align="center"> 四 </td>  
                <td align="center"> 五 </td>  
                <td align="center"> 六 </td>  
            </tr>  
            <tr bgcolor="#DEE9F4" id="tr_2">  
                <td align="center">   </td>  
                <td align="center">   </td>  
                <td align="center">   </td>  
                <td align="center"> 1 </td>  
                <td align="center"> 2 </td>  
                <td align="center"> 3 </td>  
                <td align="center"> 4</td>  
            </tr>  
            <tr bgcolor="#DEE9F4" id="tr_3">  
                <td align="center"> 5 </td>  
                <td align="center"> 6 </td>  
                <td align="center"> 7 </td>  
                <td align="center"> 8 </td>  
                <td align="center"> 9 </td>  
                <td align="center" bgcolor="red">10</td>  
                <td align="center">11</td>  
            </tr>  
            <tr bgcolor="#DEE9F4" id="tr_4">  
                <td align="center"> 12 </td>  
                <td align="center"> 13 </td>  
                <td align="center"> 14 </td>  
                <td align="center"> 15 </td>  
                <td align="center"> 16  </td>  
                <td align="center"> 17 </td>  
                <td align="center"> 18 </td>  
            </tr>  
        </tbody>  
    </table>      
    </body>  
</html>  
PerfectUrl
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery Datatables Columns API 参数详细说明
liuwei890624的博客
06-28 2856
Data Tables: http://datatables.net/ Version: 1.10.0   Columns说明 虽然我们可以通过DOM直接获取DataTables元素的信息，但是DataTables提供了更方便的方法，可以自定义列的属性。下边就让我们一起来学习DataTables是怎么来定义列属性的。 DataTables提供了两个参数来定义列属性：columns ...
jquery 操作表格
04-05
虽然提供的文件没有直接提及插件，但了解这些插件对于理解jQuery表格操作的高级用法是有帮助的。 通过这些知识点，我们可以构建一个交互式的表格，不仅可以展示静态数据，还能响应用户操作，进行数据的动态更新和...
jQuery DataTable 插件参数
weixin_34233618的博客
11-04 261
2019独角兽企业重金招聘Python工程师标准>>> ...
jQuery & Table 解析
a3391111的博客
01-05 164
jQuery && Table 这中示例网上是很多的，这个示例是书上的例子，觉得有点价值，就保存到我的博客里了。希望和大家一起学习，共同完善这个示例，做成一个jQuery插件，可以满足我们通常对表格的需求。先看看这个效果： 我将源码贴在这里,代码有注释，并且会持续更新，若有疑问也可以留言或直接Email我。 Head <%@ Page...
jquery datatable 参数
weixin_30587927的博客
03-18 642
DataTables(http://www.datatables.net/)应该是我到目前为止见过的，功能最强大的表格解决方案（当然，不计算其它整套框架中的table控件在内）。 先把它主页上写的特性翻译罗列如下： 可变长度分页；动态过滤；多列排序，带数据类型检测功能；列宽度的智能处理；从多种数据源获取数据（DOM，js Array, ajax file, server-sid...
DataTable使用技巧
weixin_30363817的博客
08-26 163
在项目中经常用到DataTable,如果DataTable使用得当，不仅能使程序简洁实用，而且能够提高性能，达到事半功倍的效果，现对DataTable的使用技巧进行一下总结。 W(r#C9m+b2T-t7c${j0 一、DataTable简介 (1)构造函数 DataTable() 不带参数初始化DataTa...
JQuery 表格操作(交替显示、拖动表格行、选择行等)
10-29
这篇文章讨论了JQuery在表格操作中的应用，包括交替显示行、拖动表格行和选择行等功能。 首先，我们来看如何实现表格行的交替显示。交替显示通常是为了提高表格的可读性，使表格的行呈现出不同的视觉效果，比如不同...
jquery表格操作.pdf
10-02
在"jquery表格操作.pdf"中，我们探讨的是如何使用JQuery来增强表格的功能，包括交替显示行、拖动表格行、选择行以及排序等操作。下面将详细讲解这些功能的实现方式。 1. **交替显示行**： 这个功能是通过CSS类的...
jquery表格操作实例
09-20
在JavaScript的世界里，jQuery是一个非常流行的库，它简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本篇文章将深入探讨...通过不断实践和学习，你将能掌握更多关于jQuery表格操作的高级技巧和最佳实践。
通过TreeColumn实现“表格树”TableTree
diaozhuo4700的博客
03-07 181
Eclipse 3.1里deprecate了TableTree这个控件，与之对应的jface的TableTreeViewer虽然没有deprecate，但使用它会得到很多警告。在TableTreeViewer的第一列里是不能显示图标的，因为这个位置被+/-符号占用了，而且TableTree是显示不出 Tree的层次的，也就是没有缩进。 SWT 3.1里的Tree控件新支持了列的显示，是...
jquery遍历table获取td单元格的值
weixin_34137799的博客
05-03 117
$().find(($().children().text()满足条件并改变行前景色1234567$("#grd").find("tr").each(function() {　　if($(this).children('td:eq(1)').text() =="满足的条件") {　　　　$("#"+this.id).css("color","#ff0000");...
Jquery DataTable基本使用
weixin_34192993的博客
12-22 2047
1，首先需要引用下面两个文件      &lt;link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" /&gt; &lt;script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.m...
【转】jQuery.dataTables 自定义排序
还是叫我官人吧
08-18 5536
原文http://wuchong.me/blog/2014/02/25/jquery-datatable-sort-plugin/?utm_source=tuicool&utm_medium=referral 最近在项目中用到了 jQuery.dataTables， 这是一个很强大的 jQuery 插件，调用方便，支持回调对数据进行排序、查询、分页等操作，并且 bootstrap 框架也
jQuery dataTables 的使用
xqqing79的专栏
10-28 897
  jQuery 的插件 dataTables 是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明，为了方便学习使用，这里一步一步进行说明。 首先，需要到 dataTables 的网站 http://www.datatables.net/ 下载这个脚本库， 目前最新的版本是 1....
用交流和直流网络实现的西景电气中的飞机电力网simulink实现.rar
09-10
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
井下甲烷气体报警器研发（工程教育课程项目报告）
09-10
井下甲烷气体报警器研发（工程教育课程项目报告）
2023-04-06-项目笔记 - 第二百五十二阶段 - 4.4.2.20全局变量的作用域-250 -2025.09.10
最新发布
09-10
2023-04-06-项目笔记-第二百五十二阶段-课前小分享_小分享1.坚持提交gitee 小分享2.作业中提交代码 小分享3.写代码注意代码风格 4.3.1变量的使用 4.4变量的作用域与生命周期 4.4.1局部变量的作用域 4.4.2全局变量的作用域 4.4.2.1全局变量的作用域_1 4.4.2.250局变量的作用域_250- 2024-09-10
028.jpg
09-10
028
15个实用的jQuery表格操作插件集合
"这篇文章主要介绍了基于jQuery的表格操作插件，包括DataTables、uiTableFilter、ScrollableHTMLTable、Tablesorter、Flexigrid和HeatColor等，这些插件可以帮助开发者更方便地处理表格的显示、排序、筛选和操控功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值