文档章节

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

皮蛋瘦肉粥里没有粥
 皮蛋瘦肉粥里没有粥
发布于 2015/03/24 14:22
字数 854
阅读 89
收藏 26
点赞 1
评论 0

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());  
}  
});  
}

© 著作权归作者所有

共有 人打赏支持
皮蛋瘦肉粥里没有粥
粉丝 11
博文 43
码字总数 20373
作品 0
朝阳
后端工程师
鼠标悬浮时动态改变当前行的背景色 各行换色

1.效果 1.1 各行换色 1.2 JS版本鼠标移动上去变色移出还原 1.23 jQuery版本鼠标悬浮背景颜色 2.代码 2.1各行换色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>各行换色</t......

Lucky_Me ⋅ 2017/08/22 ⋅ 0

物联网学习笔记——构建RESTFul平台1

0.前言 前些时间顺着Yeelink学习了RESTFUL,使用PHP和Slim框架尝试实现简单的REST API,树莓派可通过GET方法获得JSON数据包,通过这种方式实现了树莓派和服务器(我的PC)的互动。但是由于没...

thinkyoung ⋅ 2014/12/02 ⋅ 0

3个简单的事情,使你的jQuery代码变得更加棒

     jQuery是现存最流行的(如果不是最多的)JavaScript库之一,并且大量的人使用它来做一些令人惊叹的事情。就个人而言,jQuery让我对学习JavaScript感到兴奋。问题是很多程序员不明白...

webstack前端栈 ⋅ 04/14 ⋅ 0

JAVAScript强大的框架:Jquery(一)

一:jQuery是什么 为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面, 并...

architect刘源源 ⋅ 05/08 ⋅ 0

jQuery学习笔记--选择器和事件

以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括: jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...

codingcoge ⋅ 05/17 ⋅ 0

【每天一个JQuery特效】淡入淡出显示或隐藏窗口

我是JQuery新手爱好者,有时间就练练代码,防止手生,争取每天一个JQuery练习,在这个博客记录下学习的笔记。 本特效主要采用fadeIn()和fadeOut()方法显示淡入淡出的显示效果显示或隐藏元...

Rhymo-Wu ⋅ 昨天 ⋅ 0

JavaWeb05-HTML篇笔记(一)

1.1上次课内容回顾: JQuery: JQuery的概述:是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架: JQuery的使用: JQuery的选择器:(*) JQuery实现效果: JQuery样式操作: JQuer...

我是小谷粒 ⋅ 05/10 ⋅ 0

jQuery函数attr()和prop()的区别

在jQuery中,attr()函数和prop()函数都用于设置或获取指定的属性,它们的参数和用法也几乎完全相同。 但不得不说的是,这两个函数的用处却并不相同。下面我们来详细介绍这两个函数之间的区别...

Apirl ⋅ 05/16 ⋅ 0

来学着写自己的“jQuery”

jQuery是一套跨浏览器的JavaScript库,简化HTML与JavaScript之间的操作 jQuery是开源软件,使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易,如操作文档对象(document)、选择文档...

YyzclYang ⋅ 05/24 ⋅ 0

JavaScript 参考手册

JavaScript 参考手册 http://www.w3school.com.cn/jsref/index.asp 本部分提供完整的 JavaScript 参考手册: JavaScript 本地对象和内置对象 Browser 对象(BOM) HTML DOM 对象 JavaScript...

chenhao_asd ⋅ 05/25 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

开启远程SSH

SSH默认没有开启账号密码登陆,需要再配置表中修改: vim /etc/ssh/sshd_configPermitRootLogin yes #是否可以使用root账户登陆PasswordAuthentication yes #是都开启密码登陆ser...

Kefy ⋅ 26分钟前 ⋅ 0

Zookeeper3.4.11+Hadoop2.7.6+Hbase2.0.0搭建分布式集群

有段时间没更新博客了,趁着最近有点时间,来完成之前关于集群部署方面的知识。今天主要讲一讲Zookeeper+Hadoop+Hbase分布式集群的搭建,在我前几篇的集群搭建的博客中已经分别讲过了Zookeep...

海岸线的曙光 ⋅ 34分钟前 ⋅ 0

js保留两位小数方法总结

本文是小编针对js保留两位小数这个大家经常遇到的经典问题整理了在各种情况下的函数写法以及遇到问题的分析,以下是全部内容: 一、我们首先从经典的“四舍五入”算法讲起 1、四舍五入的情况...

孟飞阳 ⋅ 52分钟前 ⋅ 0

python log

python log 处理方式 log_demo.py: 日志代码。 #! /usr/bin/env python# -*- coding: utf-8 -*-# __author__ = "Q1mi""""logging配置"""import osimport logging.config# 定义三种......

inidcard ⋅ 今天 ⋅ 0

mysql 中的信息数据库以及 shell 查询 sql

Information_schema 是 MySQL 自带的信息数据库,里面的“表”保存着服务器当前的实时信息。它提供了访问数据库元数据的方式。 什么是元数据呢?元数据是关于数据的数据,如数据库名或表名,...

blackfoxya ⋅ 今天 ⋅ 0

maven配置阿里云镜像享受飞的感觉

1.在maven目录下的conf/setting.xml中找到mirrors添加如下内容,对所有使用改maven打包的项目生效。 <mirror> <id>alimaven</id> <name>aliyun maven</name> <url>http://maven.al......

kalnkaya ⋅ 今天 ⋅ 0

centos7下创建新用户并授权

1、创建新用户 创建一个用户名为:test adduser test 创建初始密码: passwd test 2、授予root权限 个人用户的权限只可以在/home/test下有完整权限,其他目录要看别人授权。而经常需要roo...

xixingzhe ⋅ 今天 ⋅ 0

求助:TiledMap如何旋转对象呢?

比如我要旋转一个梯子的角度,单纯在TiledMap旋转角度好像没有效果。那是要用代码来控制角度,还是说只能通过导入相对应的斜的图片才可以呢?

花谢自相惜 ⋅ 今天 ⋅ 0

Micronaut 之HelloWorld!

小试一下Micronaut,按照官方文档跑了一下helloworld 第一步克隆,按照官方文档是: git clone git@github.com:micronaut-projects/micronaut-core.git 结果怎么是这样?? 换个方法吧 git ...

桂哥 ⋅ 今天 ⋅ 0

pom文件

Aeroever ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部