jQuery表格(Table)基本操作实例分析


Posted in Javascript onMarch 10, 2017

本文实例讲述了jQuery表格(Table)基本操作。分享给大家供大家参考,具体如下:

Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结。

首先建立一个通用的表格css 和一个 表格Table:

table
{
  border-collapse: collapse;
  border-spacing: 0;
  margin-right: auto;
  margin-left: auto;
  width: 800px;
 }
 th, td
 {
  border: 1px solid #b5d6e6;
  font-size: 12px;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  height: 20px;
 }
 th
 {
  background-color: Gray;
 }
<table>
    <tr>
      <th style="width: 160px;">表头一</th>
      <th style="width: 160px;">表头二 </th>
      <th style="width: 160px;">表头三</th>
      <th style="width: 160px;">表头四</th>
      <th style="width: 160px;">表头五</th>
    </tr>
    <tr>
      <td>第一行第一列</td>
      <td>第一行第二列</td>
      <td>第一行第三列</td>
      <td>第一行第四列</td>
      <td>第一行第五列</td>
    </tr>
    <tr>
      <td>第二行第一列</td>
      <td>第二行第二列</td>
      <td>第二行第三列</td>
      <td>第二行第四列</td>
      <td>第二行第五列</td>
    </tr>
    <tr>
      <td>第三行第一列</td>
      <td>第三行第二列</td>
      <td>第三行第三列</td>
      <td>第三行第四列</td>
      <td>第三行第五列</td>
    </tr>
    <tr>
      <td>第四行第一列</td>
      <td>第四行第二列</td>
      <td>第四行第三列</td>
      <td>第四行第四列</td>
      <td>第四行第五列</td>
    </tr>
</table>

一、鼠标移动到行更换背景色:

增加一个css样式:

.hover
{
 background-color: #cccc00;
}

Js脚本:

$(document).ready(function () {
  //鼠标移动到行变色,单独建立css类hover
  //tr:gt(0):表示获取大于 tr index 为0 的所有tr,即不包括表头
  $("#table1 tr:gt(0)").hover(
  function () { $(this).addClass("hover") },
  function () { $(this).removeClass("hover") })
});

结果执行结果:

jQuery表格(Table)基本操作实例分析

二、 表格奇偶行变色 :

奇数行和偶数行css:

.odd{ background-color: #bbf;}
.even{ background-color:#ffc; }

Js脚本:

$(document).ready(function () {
  //奇偶行不同颜色
  $("#table2 tbody tr:odd").addClass("odd"),
  $("#table2 tbody tr:even").addClass("even")
  //或者
  //$("#table2 tbody tr:odd").css("background-color", "#bbf"),
  //$("#table2 tbody tr:even").css("background-color", "#ffc")
});

结果显示:

jQuery表格(Table)基本操作实例分析

三、基本操作:

(1)删除行,比如删除表格中的第二行:

//删除指定行(第二行)
$("#table3 tr:gt(0):eq(1)").remove();

(2)删除列,比如删除表格中的第二列:

//eq:获取子元素索引从 0 开始,先删除表头
$("#table3 tr th:eq(1)").remove();
//nth-child:获取子元素从 1 开始
$("#table3 tr td:nth-child(2)").remove();

(3)删除其它行,比如第二行之外的所有行:

$("#table3 tr:gt(0):not(:eq(1))").remove();

(4)删除其它列,比如第二列之外的所有列:

//先删除表头
$("#table3 tr th:not(:eq(1))").remove();
$("#table3 tr td:not(:nth-child(2))").remove();

(5)隐藏行,比如隐藏第二行:

$("#table3 tr:gt(0):eq(1)").hide();
//或者
//$("#table3 tr:gt(0):eq(1)").css("display", "none")
//显示
//$("#table3 tr:gt(0):eq(1)").css("display", "");

(6)隐藏列,比如隐藏第二列:

$("#table3 tr th:eq(1)").hide();
$("#table3 tr td:nth-child(2)").hide();
//或者
//$("#table3 tr th:eq(1)").css("display", "none");
//$("#table3 tr td:nth-child(2)").css("display", "none");
//显示
//$("#table3 tr th:eq(1)").css("display", "");
//$("#table3 tr td:nth-child(2)").css("display", "");

(7)插入新行,在表格最后的位置:

var newRow = "<tr style=\"background:red;\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>";
$("#table3 tr:last").after(newRow);

(8)插入行,在第二行之后插入:

var newRow = "<tr style=\"background:red;\"><td>新行第一列</td><td>新行第二列</td><td>新行第三列</td><td>新行第四列</td><td>新行第五列</td></tr>";
$("#table3 tr:gt(0):eq(1)").after(newRow);

(9)获得单元格的值,比如第二行第三列:

var v = $("#table3 tr:gt(0):eq(1) td:eq(2)").text();
//结果显示:第二行第三列

(10)获取一列的所有值,比如第二列:

var v = "";
$("#table3 tr td:nth-child(2)").each(function () {
  v += $(this).text()+" ";
});
//结果:第一行第二列 第二行第二列 第三行第二列

(11)获取一行的所有值,比如第二行:

var v = "";
$("#table3 tr:gt(0):eq(1) td").each(function () {
    v += $(this).text() + " ";
});
//结果:第二行第一列 第二行第二列 第二行第三列 第二行第四列 第二行第五列

(12)合并行单元格 比如合并 第二行第二个和第三个单元格:

$("#table3 tr:gt(0):eq(1) td:eq(1)").attr("colspan", 2);
$("#table3 tr:gt(0):eq(1) td:eq(2)").remove();

(13)拆分行单元格将上面合并的单元格还原:

//注意不能使用
//$("#table3 tr:gt(0):eq(1) td:eq(1)").removeAttr("colspan");
$("#table3 tr:gt(0):eq(1) td:eq(1)").attr("colspan", 1);
$("#table3 tr:gt(0):eq(1) td:eq(1)").after("<td>第二行第三列</td>")

(14)合并列单元格,比如合并第二列第二个单元格和第三个单元格

$("#table3 tr:gt(0):eq(1) td:eq(1)").attr("rowspan", 2);
$("#table3 tr:gt(0):eq(2) td:eq(1)").remove();

(15)拆分列单元格,比如将上面刚合并的单元格还原:

$("#table3 tr:gt(0):eq(1) td:eq(1)").attr("rowspan", 1);
//在下面行第一个单元格后插入单元格
$("#table3 tr:gt(0):eq(2) td:eq(0)").after("<td>第三行第二列</td>");

(16)为每个单元格增加点击事件,并弹出该单元格行索引和列索引:

$(document).ready(function () {
  //点击#table3 的单元格返回 单元格索引
  $("#table3 td").click(function () {
    var tdSeq = $(this).parent().find("td").index($(this));
    var trSeq = $(this).parent().parent().find("tr").index($(this).parent());
    alert("第" + (trSeq) + "行,第" + (tdSeq+1) + "列");
  })
});

附:完整实例代码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
Jul 26 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
jQuery与JavaScript节点创建方法的对比
Nov 18 Javascript
jquery.Callbacks的实现详解
Nov 30 Javascript
Bootstrap3 datetimepicker控件使用实例
Dec 13 Javascript
javascript实现去除HTML标签的方法
Dec 26 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
详解JavaScript 异步编程
Jul 13 Javascript
为什么node.js不适合大型项目
Apr 28 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 #Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 #Javascript
BootstrapValidator实现注册校验和登录错误提示效果
Mar 10 #Javascript
Bootstrap fileinput组件封装及使用详解
Mar 10 #Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 #Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 #Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 #Javascript
You might like
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
用PHP将数据导入到Foxmail的实现代码
2010/09/05 PHP
PHP图片添加水印功能示例小结
2016/10/03 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
jQuery的slideToggle方法实例
2013/05/07 Javascript
jquery中event对象属性与方法小结
2013/12/18 Javascript
SuperSlide标签切换、焦点图多种组合插件
2015/03/14 Javascript
详解JavaScript正则表达式中的global属性的使用
2015/06/16 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
Angular的$http与$location
2016/12/26 Javascript
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
微信小程序实现评论功能
2018/11/28 Javascript
extract-text-webpack-plugin用法详解
2019/02/14 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
Python内置模块turtle绘图详解
2017/12/09 Python
python多进程中的内存复制(实例讲解)
2018/01/05 Python
python中abs&amp;map&amp;reduce简介
2018/02/20 Python
python远程连接MySQL数据库
2019/04/19 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
Python与C/C++的相互调用案例
2021/03/04 Python
美国在线纱线商店:Darn Good Yarn
2019/03/20 全球购物
如何写毕业求职自荐信
2013/11/06 职场文书
庆八一活动方案
2014/01/25 职场文书
写求职信有什么意义
2014/02/17 职场文书
幼儿园保育员责任书
2014/07/22 职场文书
单位工资证明范本
2015/06/12 职场文书
消防安全培训工作总结
2015/10/23 职场文书
党员观看《筑梦中国》心得体会
2016/01/18 职场文书
Python爬虫数据的分类及json数据使用小结
2021/03/29 Python
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技