【Jquery】Jquery操作table表格详细说明

函数说明

//eq:获取子元素索引从 0 开始
$("#tableid tr th:eq(1)").remove();//第二列
//nth-child:获取子元素从 1 开始
$("#tableid tr td:nth-child(2)").remove();//第二列

行操作

1、隐藏行

$("#tableid tbody tr:eq(3)").hide();  //隐藏第四行，行索引从0开始
//隐藏第二行的方式
$("#tableid tr:gt(0):eq(1)").hide();//通过hide隐藏实现
$("#tableid tr:gt(0):eq(1)").css("display", "none");//通过样式display实现，隐藏
$("#tableid tr:gt(0):eq(1)").css("display", "");//通过样式display实现，显示

2.删除行

// 删除除第一行以外的所有行
$("#tableid tr:not(:first)").remove(); //删除指定行（如：第二行）
$("#tableid tr:gt(0):eq(1)").remove(); //删除其它行，比如删除除第二行之外的所有行
$("#tableid tr:gt(0):not(:eq(1))").remove();

3、插入行

//在第二个tr后插入一行
var trStr="<tr><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td></tr>";
$(trStr).insertAfter($("#tableid tr:eq(1)"));

4、齐偶行不同颜色

//通过style实现
$("#tableid tbody tr:odd").css("background-color", "#bbf");
$("#tableid tbody tr:even").css("background-color","#ffc");
//通过定义class实现
$("#tableid tbody tr:odd").addClass("odd")
$("#tableid tbody tr:even").addClass("even")

5、鼠标移动行改变样式

//所有行，有单独行标题
$("#tableid tr").hover(function(){  $(this).children("td").addClass("hover")
},function(){  $(this).children("td").removeClass("hover")
})
//从第二行开始，第一行作为行标题
$("#tableid tr:gt(0)").hover(function() {  $(this).children("td").addClass("hover");
}, function() {  $(this).children("td").removeClass("hover");
});

列操作

1、隐藏列

//通过hide函数实现，如隐藏第二列
$("#tableid tr th:eq(1)").hide();
$("#tableid tr td:nth-child(2)").hide();
//通过样式隐藏和现实某列，如隐藏或显示第二列
//隐藏
$("#tableid tr th:eq(1)").css("display", "none");//隐藏标题列
$("#tableid tr td:nth-child(2)").css("display", "none");//隐藏内容列
//显示
$("#tableid tr th:eq(1)").css("display", "");//显示标题列
$("#tableid tr td:nth-child(2)").css("display", "");//显示内容列//隐藏一列，如第四列
$("#tableid tr td::nth-child(4)").hide();
$("#tableid tr").each(function(){$("td:eq(3)",this).hide();}
);

2、删除列


// 删除除第一列外的所有列
$("#tableid tr td:not(:nth-child(1))").remove(); //删除其它列，比如第二列之外的所有列，如果有表头，先删除表头
$("#tableid tr th:not(:eq(1))").remove();
$("#tableid tr td:not(:nth-child(2))").remove();

获取单元格中的值

//获取或设置某个单元格的值
//设置第2个tr的第一个td的值
$("#tableid tr:eq(1) td:nth-child(1)").html("value");
//获取第2个tr的第一个td的值
$("#tableid tr:eq(1) td:nth-child(1)").html();

参考自：jQuery操作table表格详解-职坐标 (zhizuobiao.com)

【Jquery】Jquery操作table表格详细说明相关推荐

html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号捆包号品名规格材质重量业务需求是,从后台获取到订单 ...
JQuery动态生成Table表格
主要用到了JQuery中的append和appendto的方法,具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transit ...
table表格详细介绍
表格标签 table 我们在浏览网页时经常能发现段落.列表.图片等等元素出现比较多,但偶尔呢,也会看到一些表格元素,那么表格在代码中如何实现呢? 一个完整的表格应该是由table.thead.tbod ...
vue后台管理系统中，table表格页面使用mixins【混入自用】
mixins文件夹中的view-module.js 在此js中写一些公用的data配置如:查询条件,分页属性等和table表格有关的data属性在此js中写一些公用的methods方法如:查询,分页 ...
php 检测表格双击操作,PHP+jQuery实现双击修改table表格功能示例
本文实例讲述了PHP+jQuery实现双击修改table表格功能.分享给大家供大家参考,具体如下: 即点即改 $con = array( array("id"=>1,&quo ...
html表格整体左移动,js操作table统制tr jquery 两个table左右移动
js操作table控制tr jquery 两个table左右移动一.关于动态操作select的问题: ------------------------------------------------ ...
五、jQuery 对表单、表格的操作（走过路过瞅瞅吧）
文章目录前言一. 表单应用 1.1 单行文本框应用 1.2 多行文本框应用 1.3 复选框应用 1.3 下拉框应用 1.5 表单验证二. 表格应用 2.1 表格变色 2.1.1 普通的隔行变色 ...
bootstrap中表格、修饰图片、浮动、背景框、提示框及关闭提示框、元素淡入淡出及jQuery中操作类名
表格: bootstrap中用类定义了几个风格的表格,使用时给table标签加上类名即可,具体如下: 类名描述 .table 基础表格:标题加粗,只有水平的淡灰色边框线条,没有垂直方向的线条 .ta ...
jQuery实现table表格中行数据上下拖拽功能
jQuery实现table表格中行数据上下拖拽功能 $("#table").sortable({cursor: "move",axis: "y&quo ...

【Jquery】Jquery操作table表格详细说明

函数说明

行操作

列操作

获取单元格中的值

【Jquery】Jquery操作table表格详细说明相关推荐

最新文章

热门文章