jQuery 选择表格(table)里的行和列[转]

from : http://www.84ren.com/read.php?tid-29040.html

jQuery对表格(table)的处理提供了相当强大的功能,比如说对表格特定行(row)或列(column)进行排序、样式改变等等。如果你的英文够好,你可以读读这篇文章:jQuery table manipulation。本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助。
比如我们有这样一个表格:

第一列 第二列 第三列 第四列
第一列 第二列 第三列 第四列
第一列 第二列 第三列 第四列
第一列 第二列 第三列 第四列
第一列 第二列 第三列 第四列

对行进行操作比较简单:

  1. 如果我们要选择第一行,我们可以用 $('tr:eq(0)')
  2. 如果我们要选择第N行,我们可以用 $('tr:eq(n-1)')
  3. 如果我们要选择奇数行,我们可以用 $('tr:odd')
  4. 如果我们要选择偶数行,我们可以用 $('tr:even')

对列的操作相对麻烦一点,但是如果我们知道了其中原理也不难。表格里没有列的元素,第一列实际上是每一行的第一个区域(td)的组合。所以我们可以用循环来实现对行的选择。

  1. 如果我们要选择第一列并且对其样式进行改变,我们可以用下面的语句来实现 $(document).ready(function(){[/pre]    $('table').find('td').each(function(i){//搜寻表格里的每一个区间[/pre]    if(i%4 == 0){ //‘4’代表表格总共有4列,如果区间编号被4整除,那么它就属于第一列[/pre]    $(this).addClass('col_1');}//给区间加上特定样式[/pre]    });[/pre]    });[/pre]    [/pre]
  2. 如果我们要选择其它列,只需把上述代码里的i%4==0,进行相应的改变。记住:4代表表格的列数,如果你有10列就用10代替;选择第一列,余数等于0,选择第二列,余数应该等于1,如此类推。

欢迎加群互相学习,共同进步。QQ群:iOS: 58099570 | Android: 330987132 | Go:217696290 | Python:336880185 | 做人要厚道,转载请注明出处!http://www.cnblogs.com/sunshine-anycall/archive/2009/09/19/1569801.html

时间: 2024-10-31 09:46:04

jQuery 选择表格(table)里的行和列[转]的相关文章

jQuery 选择表格(table)里的行和列及改变简单样式_jquery

jQuery对表格(table)的处理提供了相当强大的功能,比如说对表格特定行(row)或列(column)进行排序.样式改变等等.如果你的英文够好,你可以读读这篇文章:jQuery table manipulation.本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助. 比如我们有这样一个表格: 第一列 第二列 第三列 第四列 第一列 第二列 第三列 第四列 第一列 第二列 第三列 第四列 第一列 第二列 第三

JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享

这篇文章介绍了JavaScript操作table,可以新增行和列并且隔一行换背景色代码,有需要的朋友可以参考一下   复制代码 代码如下: <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=gb2312">   <title>JavaScript</title>  </head>  <b

前端开发-如何用JQuery移除table中的一列?

问题描述 如何用JQuery移除table中的一列? <html> <head> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> </head> <body> <table id="thisTable"> <tr> <td>id</td&

jquery选择表格的一部分,jquery中的$(&amp;quot;:gt(index)&amp;quot;)用法

如果想要在集合选择器中在选出某一部分集合改如何做呢? 在jQuery中有一个选择器:$(":gt(index)") . index从0开始 表示选择大于index之后的元素 例如:$("tr:gt(2)"), 表示从第4个tr元素开始选择 下面我举一个例子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></

Smarty 在表格里输出多列多行数据的方法

 代码如下 复制代码 <table border="1"> <tr> <?section name=site loop=$siteList?>   <td><?$siteList[site].url?></td>   <?if $siteListColumn > 1 ?>   <?if $smarty.section.site.index != 0 && ($smarty.s

基于JQuery的动态删除Table表格的行和列的代码_jquery

首先要获取Table表格的行数,我是通过后台添加表格的所以我在前台获取的时候length一下就获取到了总数赋值例如上图: 如果我要打印这个表格但不想要操作那列的内容咋办? 复制代码 代码如下: for(var i=0;i<num+1;i++) { $("table tr").eq(i).find("td").eq(0).remove(); } 解释: num是从后台获取到的列表总和+1是为了表头那个也去掉. 第一个eq(i)是获取Table里的TR索引 第二个

jQuery实现表格行和列的动态添加与删除方法【测试可用】_jquery

本文实例讲述了jQuery实现表格行和列的动态添加与删除方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/19

jquery获取table指定行和列的数据方法(当前选中行、列)_jquery

实例如下: //不多说,直接上代码. $("table tr").click(function() {//为表格的行添加点击事件 var tr = $(this);//找到tr原色 var td = tr.find("td");//找到td元素 alert(td[0].innerHTML);//指定下标即可 }) 今日项目中需要用到取table选中列的数据,网上资料发现都不能获取到选中指定列的数据,通过分析测试后总结出以上代码,可以获取选中行/列的数据.取td的数据

jQuery实现获取table表格第一列值的方法_jquery

本文实例讲述了jQuery实现获取table表格第一列值的方法.分享给大家供大家参考,具体如下: 先来看看运行效果截图: 完整代码如下: <!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.or