文档章节

汇总常用的jQuery操作Table tr td方法

皮蛋瘦肉粥里没有粥
 皮蛋瘦肉粥里没有粥
发布于 2015/03/24 14:22
字数 854
阅读 91
收藏 26

1.鼠标移动行变色


方法一:jQuery中的hover(fun(),fun())方法,参数一:第一个方法是添加样式功能,参数二:第二个方法是取消样式功能

$("#table1 tr").hover(function(){   
$(this).children("td").addClass("hover")   
},function(){   
$(this).children("td").removeClass("hover")   
})   

 

 方法二:

$("#table1 tr:gt(0)").hover(function() {   
$(this).children("td").addClass("hover");   
}, function() {   
$(this).children("td").removeClass("hover");   
});   

 

2.奇偶行不同颜色

$("#table1 tbody tr:odd").css("background-color", "#bbf");   
$("#table1 tbody tr:even").css("background-color","#ffc");   
$("#table1 tbody tr:odd").addClass("odd")   
$("#table1 tbody tr:even").addClass("even")   

 

3.隐藏一行

$("#table1 tbody tr:eq(3)").hide();   

 

4.隐藏一列


方法一:

$("#table1 tr td::nth-child(3)").hide();  

 

方法二:

[html]  view plain copy
$("#table1 tr").each(function(){$("td:eq(3)",this).hide()});   

 

5.删除一行

//删除除第一行外的所有行   
$("#table1 tr:not(:first)").remove();  
//删除指定行  
$("#table1 tr:eq(3)").remove();  

 

6.删除一列

//删除除第一列外的所有列   
$("#table1 tr th:not(:nth-child(1))").remove();  
$("#table1 tr td:not(:nth-child(1))").remove();  
//删除第一列  
$("#table1 tr td::nth-child(1)").remove();  

 

7.得到(设置)某个单元格的值

//设置table1,第2个tr的第一个td的值。   
$("#table1 tr:eq(1) td:nth-child(1)").html("value");   
//获取table1,第2个tr的第一个td的值。   
$("#table1 tr:eq(1) td:nth-child(1)").html();  

 

8.插入一行:

<strong>//在第二个tr后插入一行   
$("<tr><td>插入3</td><td>插入</td><td>插入</td><td>插入</td></tr>").insertAfter($("#table7 tr:eq(1)"));</strong>  

 

9、获取每一行指定的单元格的值

var arr = [];  
$("#table1 tr td:nth-child(1)").each(function (key, value) {  
arr.push($(this).html());  
});  
var result = arr.join(',');  

 

10、全选或全不选

//方法一:  
//全选或全不选 此传入的参数为event 如:checkAll(event)  
 function checkAll(evt)  
 {  
 evt=evt?evt:window.event;  
 var chall=evt.target?evt.target:evt.srcElement;  
 var tbl=$("#table1");  
 var trlist=tbl.find("tr");  
 for(var i=1;i<trlist.length;i++)  
 {  
 var tr=$(trlist[i]);  
 var input=tr.find("INPUT[type='checkbox']");  
 input.attr("checked",chall.checked);  
 }  
 }  
  
//方法二:  
 
//全选或全不选 此传入的参数为this 如:checkAll(this)  
function checkAll(evt)  
{  
var tbl=$("#table1");  
var trlist=tbl.find("tr");  
for(var i=1;i<trlist.length;i++)  
{  
var tr=$(trlist[i]);  
var input=tr.find("INPUT[type='checkbox']");  
input.attr("checked",evt.checked);  
}  
}  
  
//方法三:  
//全选或全不选 此传入的参数为this 如:checkAll(this)  
function checkAll(evt)  
{  
$("#table1 tr").find("input[type='checkbox']").each(function(i){  
$(this).attr("checked",evt.checked)  
});  
}  
  
//方法四:  
//全选或全不选 此传入的参数为this 如:checkAll(this)  
function checkAll(evt)  
{  
$("#table1 tr").find("input[type='checkbox']").attr("checked",evt.checked);  
}  

11、客户端动态添加行、删除行

function btnAddRow()  
{  
//行号是从0开始,最后一行是新增、删除、保存按钮行 故减去2  
var rownum=$("#table1 tr").length-2;  
var chk="<input type='checkbox' id='chk_"+rownum+"' name='chk_"+rownum+"'/>";  
var text="<input type='text' id='txt_"+rownum+"' name='txt_"+rownum+"' width='75px'/>";  
var sel="<select id='sel_"+rownum+"'><option value='1'></option><option value='0'></option></select>";  
var row="<tr><td>"+chk+"</td><td>"+text+"</td><td>"+sel+"</td><td>"+text+"</td><td>"+text+"</td></tr>";  
$(row).insertAfter($("#table1 tr:eq("+rownum+")"));   
}  
  
//客户端删除一行  
//每次只能删除一行,删除多行时出错  
function btnDeleteRow()  
{  
$("#table1 tr").find("input[type='checkbox']").each(function(i){  
if($(this).attr("checked"))  
{   
if(i!=0)//不能删除行标题  
{  
$("#table1 tr:eq("+i+")").remove();  
}  
}  
});  
}  
  
//这个比上面的要好,可以一下删除多个记录  
function btnDeleteRow()  
{  
$("#table1 tr").each(function(i){  
var chk=$(this).find("input[type='checkbox']");  
if(chk.attr("id")!="checkall")//不能删除标题行  
{  
if(chk.attr("checked"))  
{  
$(this).remove();  
}  
}  
});  
}  
//客户端保存  
function btnSaveClick()  
{  
//find()方法中我暂时不知道如何设定多个筛选条件,所以下面得不到select列表的值  
//$("#table1 tr td").find("input[type='text']" || "select").each(function(i){  
//alert($(this).val());  
//});  
  
$("#table1 tr").find("td").each(function(i){  
if($(this).find("input[type='text']").length>0)  
{  
alert($(this).find("input[type='text']").val());  
}  
else if($(this).find("select").length>0)  
{  
alert($(this).find("select").val());  
}  
});  
}

本文转载自:http://blog.cnsolomo.com/ld/web/210.html

共有 人打赏支持
皮蛋瘦肉粥里没有粥
粉丝 11
博文 58
码字总数 20373
作品 0
朝阳
后端工程师
jQuery 再探 event , jQuery 对于 DOM 的跨浏览器封装。

Javascript再探 event 事件。 我们知道浏览器中有很多的差异性,比如对于 浏览器中的 event 事件进行处理的方式, IE 明显的就和别的浏览器不一样。所以后来诞生了风靡前端的 jQuery 库。我原...

香吉士
2012/06/12
0
0
django +jQuery Grid Plugin 实现表格前提自动分页, 排序

由于django 中文在前台显示乱码,本文使用了 先在用django模板生成表格,再用jQuery Grid对表格 进行处理。

yubochinese
06/26
0
0
jquery 新建元素的事件绑定

我想很多人都会向我一样曾经被动态添加元素的事件绑定困惑很久,也就是在页面加载完成后给已有元素绑定了事件,但又新增加的元素上却没有绑定任何事件。 js的事件监听跟css不一样,css只要设定...

陈好
2014/08/14
0
0
ASP.NET MVC4中调用WEB API的四个方法

使用jQuery 调用WEB API 接下来,我们在Index控制器中新建立一个视图,如下图: 接下来就可以根据实际需要,决定在页面中显示customer表中的多少列,最后的页面显示如下: 当页面加载时,使用...

随智阔
2012/08/05
0
0
用jQuery对TABLE进行增、删、改操作

<%@ Page Title="关于我们" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="About.aspx.cs" Inherits="About" %> <asp:Content ID="HeaderContent" runat=......

白沫离
2012/12/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

深入理解OAuth2.0协议

1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间。是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题。豪车一般配备两种钥匙:主钥匙和泊...

xtof
22分钟前
1
0
Linux学习-0920

3.4 usermod命令 3.5 用户密码管理 3.6 mkpasswd命令 一、usermode命令 usermode作用是用来修改用户信息。 方法: usermod 参数 username 示例1:修改用户uid usermod -u 1010 test5 示例2...

wxy丶
32分钟前
1
0
synchronized锁对象的坑

今天本来写点其他东西,碰巧写了一下synchronized,没想到掉坑里面了,大佬别笑。 起初代码大概是这样的: package com.ripplechan.part_1_2_3;import java.util.concurrent.CountDownL...

RippleChan
35分钟前
1
0
XAMPP环境搭建(Apache + MariaDB + PHP + Perl)

operation system:ubuntu-18.04.1 step1:download XAMPP #sudo wget https://www.apachefriends.org/xampp-files/7.2.9/xampp-linux-x64-7.2.9-0-installer.run step2:install XAMPP #sudo ......

硅谷课堂
37分钟前
0
0
关于获取3DS MAX中的蒙皮数据 3DSMAX C++API的应用

目的是为OSG做自定义的导出插件. 记录取得数据的方法. Max在代码中会提供一个INode对象. 从这个对象里取出各种数据. getSkin这个函数取出了ISkin修改器 下面这个函数一样是用于学习, 把数据输...

洛克人杰洛
43分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部