文档章节

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

皮蛋瘦肉粥里没有粥
 皮蛋瘦肉粥里没有粥
发布于 2015/03/24 14:22
字数 854
阅读 92
收藏 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
求精简jquery代码

jquery,如何为表格新增行中的input(并且是以field14145_开头的)绑定onblur事件? //下面的代码是我写的,求简化语句 jQuery(".inputstyle").live("click",function (){ var _name=jQuery(thi...

爱dota爱生活
2014/09/30
192
2
java jsp 表单提交到数据库

我的newCustomer.jsp如下: <%@ page language="java" import="java.util.*" import="java.sql.*" contentType="text/html;charset=UTF-8" pageEncoding="utf-8"%> <%@ page session="true"......

wenwen1
2012/08/21
4.6K
1
django +jQuery Grid Plugin 实现表格前提自动分页, 排序

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

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

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

陈好
2014/08/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

java框架学习日志-7(静态代理和JDK代理)

静态代理 我们平时去餐厅吃饭,不是直接告诉厨师做什么菜的,而是先告诉服务员点什么菜,然后由服务员传到给厨师,相当于服务员是厨师的代理,我们通过代理让厨师炒菜,这就是代理模式。代理...

白话
今天
21
0
Flink Window

1.Flink窗口 Window Assigner分配器。 窗口可以是时间驱动的(Time Window,例如:每30秒钟),也可以是数据驱动的(Count Window,例如:每一百个元素)。 一种经典的窗口分类可以分成: 翻...

满小茂
今天
17
0
my.ini

1

architect刘源源
今天
15
0
docker dns

There is a opensource application that solves this issue, it's called DNS Proxy Server It's a DNS server that solves containers hostnames, if could not found a hostname that mat......

kut
今天
15
0
寻找数学的广度——《这才是数学》读书笔记2700字

寻找数学的广度——《这才是数学》读书笔记2700字: 文|程哲。数学学习方式之广:国内外数学教育方面的专家,进行了很多种不同的数学学习方式尝试,如数学绘本、数学游戏、数学实验、数学步道...

原创小博客
今天
27
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部