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 相关文章推荐
javascript一些实用技巧小结
Mar 18 Javascript
JavaScript数据类型检测代码分享
Jan 26 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
Jquery树插件zTree用法入门教程
Feb 17 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
JS打印彩色菱形的实例代码
Aug 15 Javascript
浅谈vue 单文件探索
Sep 05 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
vue封装可复用组件confirm,并绑定在vue原型上的示例
Oct 31 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 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
joomla内置的表单验证功能使用方法
2010/06/11 PHP
phpadmin如何导入导出大数据文件及php.ini参数修改
2013/02/18 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
基于jQuery的日期选择控件
2009/10/27 Javascript
javascript数组去重3种方法的性能测试与比较
2013/03/26 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
js切换光标示例代码
2013/10/10 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
基于JavaScript实现弹出框效果
2016/02/19 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
微信小程序静默登录的实现代码
2020/01/08 Javascript
详解vue高级特性
2020/06/09 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
解决vue init webpack 下载依赖卡住不动的问题
2020/11/09 Javascript
python实现线程池的方法
2015/06/30 Python
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
pytorch 移动端部署之helloworld的使用
2020/10/30 Python
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
希尔顿酒店官方网站:Hilton Hotels
2017/06/01 全球购物
中药专业大学生医药工作求职信
2013/10/25 职场文书
分公司负责人任命书
2014/06/04 职场文书
建筑学专业自荐书
2014/07/09 职场文书
2014年文明创建工作总结
2014/11/25 职场文书
2015年师德师风承诺书
2015/01/22 职场文书
python实现对doc、txt、xls等文档的读写操作
2022/04/02 Python