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 常用关键字列表集合
Dec 04 Javascript
JavaScript 学习技巧
Feb 17 Javascript
js 复制或插入Html的实现方法小结
May 19 Javascript
javascript椭圆旋转相册实现代码
Jan 16 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
JS计算两个时间相差分钟数的方法示例
Jan 10 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
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 数组遍历顺序理解
2009/09/09 PHP
隐性调用php程序的方法
2015/06/13 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
JS实现超炫网页烟花动画效果的方法
2015/03/02 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
js简单判断flash是否加载完成的方法
2016/06/21 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
Bootstrap table使用方法汇总
2017/11/17 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
JS实现可控制的进度条
2020/03/25 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
Python中用Decorator来简化元编程的教程
2015/04/13 Python
在Gnumeric下使用Python脚本操作表格的教程
2015/04/14 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
python pandas时序处理相关功能详解
2019/07/03 Python
解决yum对python依赖版本问题
2019/07/05 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
python的sys.path模块路径添加方式
2020/03/09 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
美国百货齐全的精品网站,提供美式风格的产品:Overstock.com
2016/07/22 全球购物
美国餐厅用品和厨房设备批发网站:KaTom Restaurant Supply
2018/01/27 全球购物
浙江文明网签名寄语
2014/01/18 职场文书
法学院方阵解说词
2014/01/29 职场文书
餐厅执行经理岗位职责范本
2014/02/26 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
分析Python list操作为什么会错误
2021/11/17 Python
python分分钟绘制精美地图海报
2022/02/15 Python