jQuery操作Table技巧大汇总


Posted in Javascript onJanuary 23, 2016

本文汇总了jQuery操作Table的技巧。分享给大家供大家参考,具体如下:

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

方法二:
$("#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.插入一行:

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

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());
}
});
}
<style type="text/css">
.hover
{
  background-color:red;
}
</style>
<table id="table1" border="1" cellpadding="0" cellspacing="0">
<tr>
<th>
<input type="checkbox" id="checkall" onclick="checkAll1(this)"/>
</th>
<th>姓名</th>
<th>性别</th>
<th>密码</th>
<th>地址</th>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox1" />
</td>
<td>张三</td>
<td>男</td>
<td>zhangsan</td>
<td>上海</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox2" />
</td>
<td>李四</td>
<td>男</td>
<td>lisi</td>
<td>安庆</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox3" />
</td>
<td>王五</td>
<td>男</td>
<td>beijing</td>
<td>北京</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox4" />
</td>
<td>无名氏</td>
<td>女</td>
<td>wumingshi</td>
<td>上海</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox5" />
</td>
<td>赵老师</td>
<td>男</td>
<td>zhaolaoshi</td>
<td>浙江</td>
</tr>
<tr>
<td colspan="5" align="center">
<input type="button" id="btnAdd" runat="server" value="新增" onclick="btnAddRow()" />
<input type="button" id="btnDelete" runat="server" value="删除" onclick="btnDeleteRow()" />
<input type="button" id="btnSave" runat="server" value="保存" onclick="btnSaveClick()" />
</td>
</tr>
</table>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
Javascript----文件操作
Jan 18 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Jul 21 Javascript
js创建元素(节点)示例
Jan 02 Javascript
Javascript中引用示例介绍
Feb 21 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
js实现图片上传预览原理分析
Jul 13 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
Jul 18 Javascript
Vue实现可移动水平时间轴
Jun 29 Javascript
jquery采用oop模式class类的使用示例
Jan 22 #Javascript
jquery日历插件datepicker用法分析
Jan 22 #Javascript
js简单设置与使用cookie的方法
Jan 22 #Javascript
prototype框架中美元符号$用法分析
Jan 22 #Javascript
详解javascript传统方法实现异步校验
Jan 22 #Javascript
jquery.validate提示错误信息位置方法
Jan 22 #Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 #Javascript
You might like
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
PHP实现获取图片颜色值的方法
2014/07/11 PHP
AJAX的使用方法详解
2017/04/29 PHP
JavaScript 模式之工厂模式(Factory)应用介绍
2012/11/15 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
AngularJS Select(选择框)使用详解
2017/01/18 Javascript
jQuery实现鼠标移入移出事件切换功能示例
2018/09/06 jQuery
WebStorm中如何将自己的代码上传到github示例详解
2020/10/28 Javascript
python轻松实现代码编码格式转换
2015/03/26 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
基于Django用户认证系统详解
2018/02/21 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
详解pandas的外部数据导入与常用方法
2019/05/01 Python
Python PO设计模式的具体使用
2019/08/16 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
Html5插件教程之添加浏览器放大镜效果的商品橱窗
2016/01/07 HTML / CSS
HTML5头部标签的一些常用信息小结
2016/10/23 HTML / CSS
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
应届生.NET方向面试题
2015/05/23 面试题
自我评价个人范文
2013/12/16 职场文书
冰淇淋店创业计划书范文
2013/12/27 职场文书
学校岗位设置方案
2014/01/16 职场文书
医学院毕业生自荐信范文
2014/03/06 职场文书
作风大整顿心得体会
2014/09/10 职场文书
gateway网关接口请求的校验方式
2021/07/15 Java/Android
Redis Cluster 集群搭建你会吗
2021/08/04 Redis
使用python绘制横竖条形图
2022/04/21 Python
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis
python实现学员管理系统(面向对象版)
2022/06/05 Python