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;
jQuery操作table tr td的更多相关文章
- jQuery操作Table tr td常用的方法
虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...
- 汇总常用的jQuery操作Table tr td方法
虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...
- jQuery遍历Table tr td td中包含标签
function shengchen() { var arrTR = $("#tbModule").children(); var Context=""; $( ...
- JQuery操作Table元素
使用Jquery操作Table中的tr向上或向下移动,以及全选和反选操作. 点击Table Head中的复选框,全选或反选表格中所有的复选框; 选中复选框,点击Up 按钮, tr上移;点击 Down ...
- jQuery操作table数据上移、下移和置顶
jQuery 操作table中的tr换行的步骤如下: 1.获取当前tr var $tr = $(this).parents("tr"); 2.移动tr //上移 $tr.prev( ...
- JS动态创建Table,Tr,Td并赋值
JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...
- html中table,tr,td
table表格,tr表格中的行,tr表格中的列,等级关系是table>tr>td, 当然表格中还包括thead,tbody,tfoot,th,但由于浏览器支持缘故很少使用.另外table在 ...
- Jquery操作Table
Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个 表格Table: table { border-collapse: ...
- jQuery操作Table学习总结[转]
<style type="text/css"> .hover { } </style>< ...
随机推荐
- 优化 Redis 的使用策略
Redis Key 的命名策略 Redis 是 K-V 形式的缓存数据库,每一个需要缓存的 Object 都需要唯一的 Key 来标识.但是,我们日常在做开发的时候,经常会出现一个公司或者部门之间共用 ...
- 解决 android.support.v7.widget.GridLayout 使用 xmlns:app 出现 error 的问题
GridLayout 是在 Android API Level 14 加进来的 它可用来取代 TableLayout 也提供了自由度较大且实用的排版功能 为了兼容 4.0 以下的较低版本 Androi ...
- 【Python】实现将Excel编写的用例上传到testlink指定用例集
背景 百科上说TestLink 是基于web的测试用例管理系统,主要功能是测试用例的创建.管理和执行,并且还提供了一些简单的统计功能.其他的信息可以参照他们的官网http://www.testlink ...
- ng-grid
请查看官网:http://angular-ui.github.io/ui-grid/ 简单的使用: 总的来说我们 1.需要引入ng-grid-1.3.2.js 2.在html页面需要加入 class ...
- Java中处理异常的9个最佳实践
Java中的异常处理不是一个简单的话题.初学者很难理解,甚至有经验的开发人员也会花几个小时来讨论应该如何抛出或处理这些异常. 这就是为什么大多数开发团队都有自己的异常处理的规则和方法.如果你是一个团队 ...
- jQuery.prop() 函数详解
prop()函数用于设置或返回当前jQuery对象所匹配的元素的属性值. 该函数属于jQuery对象(实例).如果需要删除DOM元素的属性,请使用removeProp()函数. 语法jQuery 1. ...
- json.dumps与json.dump的区别 json.loads与json.load的区别(简洁易懂)
json.dumps是将一个Python数据类型列表进行json格式的编码解析, 示例如下: >>> import json #导入python 中的json模块 >>& ...
- asp.net导出excel并弹出保存提示框
asp.net导出excel并弹出保存提示框 2013-07-12 | 阅:1 转:78 | 分享 腾讯空间 人人网 开心网 新浪微博 腾讯微博 搜狐空间 推荐给朋友 举报 ...
- 高级浏览器-SRWare Iron 29.0.1600.0 版本发布
SRWare Iron是德国一安全公司srware改造的Chrome(铬)命名为铁(iron)的浏览器.于2008年9月18日首次发布. 据官方介绍,Iron浏览器砍掉了Chromium原程序中的很多 ...
- New Concept English Two 14 34
recently busy a lot ,just practices every morning. $课文32 购物变得很方便 324. People are not so hone ...