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 相关文章推荐
js获取location.href的参数实例代码
Aug 02 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
jQuery通过写入cookie实现更换网页背景的方法
Apr 15 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
Jul 15 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
js运动事件函数详解
Oct 21 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 Javascript
JavaScript数据结构之二叉树的遍历算法示例
Apr 13 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 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
在WIN98下以apache模块方式安装php
2006/10/09 PHP
一个用php3编写的简单计数器
2006/10/09 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
php中3种方法删除字符串中间的空格
2014/03/10 PHP
php版淘宝网查询商品接口代码示例
2014/06/17 PHP
PHP简单创建压缩图的方法
2016/08/24 PHP
什么是JavaScript
2009/08/13 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
跨域传值即主页面与iframe之间互相传值
2013/12/09 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
2015/11/30 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
DOM事件探秘篇
2017/02/15 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
2017/10/17 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
详解使用webpack构建多页面应用
2017/12/21 Javascript
微信小程序canvas拖拽、截图组件功能
2018/09/04 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
2019/03/08 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
Javascript节流函数throttle和防抖函数debounce
2020/12/03 Javascript
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
深入理解python中的atexit模块
2017/03/07 Python
Python实现矩阵加法和乘法的方法分析
2017/12/19 Python
处理Selenium3+python3定位鼠标悬停才显示的元素
2019/07/31 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
html5定位并在百度地图上显示的示例
2014/04/27 HTML / CSS
中国网上药店领导者:1药网
2017/02/16 全球购物
教师学习培训邀请函
2014/02/04 职场文书
国庆横幅标语
2014/10/08 职场文书
公司租房协议书范本
2014/10/08 职场文书
努力工作保证书
2015/02/28 职场文书