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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
JS中typeof与instanceof之间的区别总结
Nov 14 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
javascript学习之json入门
Dec 22 Javascript
js自制图片放大镜功能
Jan 24 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
Javascript es7中比较实用的两个方法示例
Jul 21 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
jquery实现搜索框功能实例详解
Jul 23 jQuery
axios向后台传递数组作为参数的方法
Aug 11 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
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/06/07 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
PHP正则匹配反斜杠'\'和美元'$'的方法
2017/02/08 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
jQuery不使用插件及swf实现无刷新文件上传
2014/12/08 Javascript
Bootstrap每天必学之简单入门
2015/11/19 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
最基础的vue.js双向绑定操作
2017/08/23 Javascript
JSON字符串操作移除空串更改key/value的介绍
2019/01/05 Javascript
Vue项目页面跳转时浏览器窗口上方显示进度条功能
2020/03/26 Javascript
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
Python 的字典(Dict)是如何存储的
2019/07/05 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
使用Python中tkinter库简单gui界面制作及打包成exe的操作方法(二)
2020/10/12 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
人事专员岗位职责
2013/11/20 职场文书
教室布置标语
2014/06/26 职场文书
五一活动标语
2014/06/30 职场文书
社区公民道德宣传日活动总结
2015/03/23 职场文书
行政处罚决定书
2015/06/24 职场文书
Python中else的三种使用场景
2021/06/16 Python
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python
js前端面试常见浏览器缓存强缓存及协商缓存实例
2022/06/21 Javascript
windows server2008 开启端口的实现方法
2022/06/25 Servers
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS