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的更多相关文章

  1. jQuery操作Table tr td常用的方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  2. 汇总常用的jQuery操作Table tr td方法

    虽然现在DIV+CSS进行页的布局大行其道,但是很多地方使用table还是有很多优势,用table展示数据是比较方便的,下面汇总了jQuery操作Table tr td常用的方法,熟记这些操作技巧,下 ...

  3. jQuery遍历Table tr td td中包含标签

    function shengchen() { var arrTR = $("#tbModule").children(); var Context=""; $( ...

  4. JQuery操作Table元素

    使用Jquery操作Table中的tr向上或向下移动,以及全选和反选操作. 点击Table Head中的复选框,全选或反选表格中所有的复选框; 选中复选框,点击Up 按钮, tr上移;点击 Down ...

  5. jQuery操作table数据上移、下移和置顶

    jQuery 操作table中的tr换行的步骤如下: 1.获取当前tr var $tr = $(this).parents("tr"); 2.移动tr //上移 $tr.prev( ...

  6. JS动态创建Table,Tr,Td并赋值

    JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...

  7. html中table,tr,td

    table表格,tr表格中的行,tr表格中的列,等级关系是table>tr>td, 当然表格中还包括thead,tbody,tfoot,th,但由于浏览器支持缘故很少使用.另外table在 ...

  8. Jquery操作Table

    Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个 表格Table: table { border-collapse: ...

  9. jQuery操作Table学习总结[转]

    <style type="text/css">       .hover       {                  }    </style>< ...

随机推荐

  1. thinkphp3.2笔记(3)视图渲染 模板的赋值与显示 系统变量

    一  视图 1  视图渲染 渲染模板输出最常用的是使用display方法,调用格式:display('[模板文件]'[,'字符编码'][,'输出类型'])模板文件的写法支持下面几种:用法 描述不带任何 ...

  2. vue2.0 组件和v-model

    本文适合初学组件编写的同学阅读. 乍一看这个标题,可能会有疑问:v-model和组件也能扯到一起? 我打算写这篇文章的时候,也是这么想的.咱们按简历的那一套STAR法则来梳理一下这篇文章: 情景[Si ...

  3. 关联规则&Apriori算法

    2017-12-02 14:27:18 一.术语 Items:项,简记I Transaction:所有项的一个非空子集,简记T Dataset:Transaction的一个集合,简记D 关联规则: 一 ...

  4. How To Use Amazon MWS To Download Unshipped Order Reports

    文章来源:http://www.samswiches.com/2011/02/how-to-use-amazon-mws-to-download-unshipped-order-reports/ ac ...

  5. 数论练习(4)——同余方程(扩gcd)

    CODEVS 1200 同余方程 题目描述 Description 求关于 x 同余方程 ax ≡ 1 (mod b)的最小正整数解. 输入描述 Input Description 输入只有一行,包含 ...

  6. cocos creator开发微信小游戏记录

    先用cocoscreator实现游戏逻辑 在cocoscreator项目里可以调用微信小游戏api 在cocos里面判断小游戏的运行环境 if (cc.sys.platform === cc.sys. ...

  7. 修改Intelij IDEA的maven依据下载为国内镜像(阿里)

    1.win7环境,默认情况下在用户目录的.m2下自己新建setting文件.QQ群交流:697028234 .m2\settings.xml 2.settings.xml文件内容为: <sett ...

  8. Python3 字符串(七)

    字符串是 Python 中最常用的数据类型.我们可以使用引号( ' 或 " )来创建字符串. 创建字符串很简单,只要为变量分配一个值即可. python中单引号和双引号使用完全相同. 使用三 ...

  9. Linux下各文件夹的含义和用途

    Linux根目录”/“下各个系统文件夹的含义和用途 1./boot 该目录默认下存放的是Linux的启动文件和内核. 2./initrd 它的英文含义是boot loader initialized ...

  10. ubuntu16.04安装Nvidia显卡驱动、CUDA8.0和cudNN V6

    Nvidia显卡驱动安装 在ubuntu搜索框输入 软件更新,打开 "软件和更新" 对话框,在 附加驱动里选择系统检测到的Nvidia驱动,应用更改,重启系统: 安装完成之后查看G ...