jQuery操作table tr td

jQuery操作table tr td

大家好,又见面了,我是全栈君。

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.插入一行

//插入一行
$("<tr><td>插入3</td><td>插入</td></tr>").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的值实现方法

<tbody id="history_income_list">
<tr>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><a class="" onclick="history_income_del(this);" href="###">删除</a></td>
</tr>
<tr>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><a class="" href="###">删除</a></td>
</tr>
<tr>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><input type="text" class="input-s input-w input-hs"></td>
<td align="center"><a class="" href="###">删除</a></td>
</tr>
</tbody>

//方法1
var trList = $("#history_income_list").children("tr")
for (var i=0;i<trList.length;i++) {
  var tdArr = trList.eq(i).find("td");
  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);
}

//方法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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/108324.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • php隐式转换,隐式转换如何使用?总结隐式转换实例用法「建议收藏」

    php隐式转换,隐式转换如何使用?总结隐式转换实例用法「建议收藏」JavaScript的数据类型分为六种,分别为null,undefined,boolean,string,number,object。object是引用类型,其它的五种是基本类型或者是原始类型。我们可以用typeof方法打印来某个是属于哪个类型的。不同类型的变量比较要先转类型,叫做类型转换,类型转换也叫隐式转换。隐式转换通常发生在运算符加减乘除,等于,还有小于,大于等。。typeof’11’…

    2022年10月11日
    2
  • Vivado中ILA显示信号不全的解决办法

    Vivado中ILA显示信号不全的解决办法在代码中加入了很多信号 但是下载程序后进入 ILA 界面时信号却显示不全 其实这不是代码的问题 信号有是有 只是没有添加进来 点击加号把没有显示的信号添加进来就可以了

    2025年11月7日
    5
  • 如何使用pc3000改变西数硬盘的模块位置

    如何使用pc3000改变西数硬盘的模块位置

    2021年9月15日
    47
  • WXS 模块

    WXS 模块WXS 代码可以编写在 wxml 文件中的 nbsp nbsp 标签内 或以 nbsp wxs nbsp 为后缀名的文件内 模块每一个 nbsp wxs nbsp 文件和 nbsp nbsp 标签都是一个单独的模块 每个模块都有自己独立的作用域 即在一个模块里面定义的变量与函数 默认为私有的 对其他模块不可见 一个模块要想对外暴露其内部的私有变量与函数 只能通过 nbsp module exports nbsp 实现 wxs 文件在微信开发者工具里面 右

    2025年11月8日
    5
  • FPGA–modelsim仿真工具的破解

    FPGA–modelsim仿真工具的破解1、先把modelsim安装到电脑上;2、将解压的破解文件(MentorKG.exe和patch_dll.bat)复制到modelsim安装目录下的win64文件夹中;3、进入安装目录下的win64文件夹找到mgls.dll、mgls64.dll两个文件,去掉只读属性;4、运行patch_dll.bat(双击该文件即可,有的教程是通过cmd运行的,不过没有直接双击方便快捷),稍等一段时…

    2022年5月23日
    47
  • eva0.4.1源码看看4

    eva0.4.1源码看看4

    2021年8月26日
    75

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号