博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery操作table tr td
阅读量:5965 次
发布时间:2019-06-19

本文共 1930 字,大约阅读时间需要 6 分钟。

1.鼠标移动行变色

$("#tab tr").hover(function(){    $(this).children("td").addClass("hover")},function(){    $(this).children("td").removeClass("hover")});方法二:$("#tab tr:gt(0)").hover(function(){    $(this).children("td").addClass("hover");},function(){    $(this).children("td").removeClass("hover");});

2.奇偶行不同颜色

$("#tab tbody tr:odd").css("background-color","#bbf");$("#tab tbody tr:even").css("background-color","#fff");$("#tab tbody tr:odd").addClass("odd");$("#tab tbody tr:even").addClass("even");

3.隐藏一行

$("#tab tbody tr:eq(3)").hide();

4.隐藏一列

$("tab tr td::nth-child(3)").hide();方法二$("tab tr").each(function(){    $("td:eq(3)",this).hide();});

5.删除一列

//删除除第一列所有列$("#tab tr th:not(:nth-child(1))").remove();$("#tab tr td:not(:nth-child(1))").remove(); //删除第一列 $("#tab tr td::nth-child(1)").remove();

6.删除一行

//删除除第一行所有行$("#tab tr :not(:first)").remove();//删除指定行$("#tab tr:eq(3)").remove();

7.得到(设置)某个单元格的值

//设置tab 第2个tr的第一个td的值。$("#tab tr:eq(1) td:nth-child(1)").html("value");//获取tab 第2个tr的第一个td的值$("tab tr:eq(1) th:nth-child(1)).html();

8.插入一行

//插入一行$("插入3插入").insertAfter("#tab tr:eq(1)");

9.获取每一行单元格的值

var arr=[];$("tab tr td:nth-child(1)").each(function(key,value){    arr.push($(this).html());});var result = arr.join(',');

10.遍历tab tr获取td的值实现方法

//方法1var trList = $("#history_income_list").children("tr")for (var i=0;i
//方法2$("#history_income_list").find("tr").each(function(){var tdArr = $(this).children();    var history_income_type = tdArr.eq(0).find("input").val();//收入类别    var history_income_money = tdArr.eq(1).find("input").val();//收入金额    var history_income_remark = tdArr.eq(2).find("input").val();// 备注     alert(history_income_type);    alert(history_income_money);    alert(history_income_remark);  });

 11.根据tab中td所在的行号或列号

//获取表的总数tr$("#table").find("tr").length;//获取所在的行号$("#td1").parent().prevAll().length+1//获取所在的列号$("#td1").prevAll().length+1;

 

转载于:https://www.cnblogs.com/zhangqian1031/p/7150271.html

你可能感兴趣的文章
karma如何与测试框架合作2之webpack
查看>>
关于VSCode更新对于emmet2.0支持的配置更改问题。
查看>>
二叉树的遍历
查看>>
三元组相加获得target
查看>>
Javascript设计模式之——代理模式
查看>>
10分钟搭建MySQL Binlog分析+可视化方案
查看>>
vmware虚拟机配置串口
查看>>
小型自动化运维--expect脚本之传递函数
查看>>
多activity中退出整个程序
查看>>
【scala初学】scala IDE eclipse
查看>>
Dockerfile构建LNMP分离环境部署wordpress
查看>>
网络中最常用的网络命令(5)-完整参数
查看>>
[unity3d]Assetbundle使用示例2(支持多平台)
查看>>
實用 SMTP 指令
查看>>
Exchange Server 2010部署安装之一
查看>>
重建控制文件--Rebuild controlfile
查看>>
PhotoShop的神奇(重新发表)
查看>>
集群节点列表编辑程序
查看>>
Nsrp实现juniper防火墙的高可用性【HA】!
查看>>
Linux下磁盘阵列raid
查看>>