jQuery 删除行（带跨行的表格）

  • 实现效果，点击删除按钮后，在保证原来表格结构的基础上，移除当前行。

  • 代码原理：

1、点击行后判断当前行的第一个<td>,是否包含rowspan属性，如果包含，把rowspan减去1，把这个<td>插入到下一行，移除当前行。

2、如果当前行不包含rowspan属性，找到它上一级定义rowspan属性的列，将其rowspan减去1，移除当前行。

实现代码：需要引入 jquery-1.7.2.min.js

  • 代码：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.      <script src="jquery-1.7.2.min.js"></script>
  6.     <script language="javascript">
  7.  
  8.         $(function() {
  9.             $("#table input[type='button'][name^='button']").click(function() {
  10.  
  11.                 var tr = $(this).parent().parent();  　　　// 当前行
  12.                 var trIndex = tr.index();    　　　　　 // 当前行索引
  13.                 var firstTD = tr.children().eq(0);     // 当前行第一个td
  14.  
  15.                 // 判断当前行第一列是否包含 rowspan 属性
  16.                 if ( typeof(firstTD.attr("rowspan")) != "undefined") {
  17.  
  18.                     var firstTDText = firstTD.text(); // 获取此行第一列内容
  19.                     var rowspan = firstTD.attr("rowspan");
  20.  
  21.                     if (rowspan != 1) {
  22.                         // 将td插入到下一行
  23.                         tr.next().children().eq(0).before("<td rowspan="+(rowspan-1)+">"+firstTDText+"</td>");
  24.                     }
  25.                 }
  26.                 else {
  27.  
  28.                     // 带有 rowspan 属性的行的索引
  29.                     var rowspanIndex = 0;
  30.  
  31.                     $("#table tr td[rowspan]").each(function(i) {
  32.  
  33.                         var rowspan = $("#table tr td[rowspan]").eq(i).attr("rowspan");
  34.                         if (parseInt(rowspan) >= trIndex) return false;
  35.                         trIndex = trIndex - parseInt(rowspan);
  36.                         rowspanIndex += 1;
  37.                     });
  38.  
  39.                     var rowspan = $("#table tr td[rowspan]").eq(rowspanIndex).attr("rowspan");
  40.                     $("#table tr td[rowspan]").eq(rowspanIndex).attr("rowspan",rowspan-1);
  41.                 }
  42.  
  43.                 tr.remove();
  44.             })
  45.         });
  46.  
  47.     </script>
  48.     <title>无标题文档</title>
  49.     </head>
  50.     <body>
  51.     <table width="498" border="1" align="center" style="text-align:center" id="table" cellpadding="0" cellspacing="0">
  52.         <tr>
  53.             <th width="95" scope="col">类别</th>
  54.             <th width="114" scope="col">名称</th>
  55.             <th width="92" scope="col">价格</th>
  56.             <th width="87" scope="col">级别</th>
  57.             <th width="98" scope="col">状态</th>
  58.         </tr>
  59.         <tr>
  60.             <td rowspan="4">笔记本</td>
  61.             <td>Acer</td>
  62.             <td>4900</td>
  63.             <td>1</td>
  64.             <td><input type="button" name="button" id="button" value="删除" /></td>
  65.         </tr>
  66.         <tr>
  67.             <td>华硕</td>
  68.             <td>4900</td>
  69.             <td>1</td>
  70.             <td><input type="button" name="button2" id="button2" value="删除" /></td>
  71.         </tr>
  72.         <tr>
  73.             <td>DELL</td>
  74.             <td>4900</td>
  75.             <td>1</td>
  76.             <td><input type="button" name="button3" id="button3" value="删除" /></td>
  77.         </tr>
  78.                 <tr>
  79.             <td>DELL</td>
  80.             <td>4900</td>
  81.             <td>1</td>
  82.             <td><input type="button" name="button3" id="button3" value="删除" /></td>
  83.         </tr>
  84.         <tr>
  85.             <td rowspan="3">台式机</td>
  86.             <td>台式机11</td>
  87.             <td>4900</td>
  88.             <td>1</td>
  89.             <td><input type="button" name="button4" id="button4" value="删除" /></td>
  90.         </tr>
  91.         <tr>
  92.             <td>台式机22</td>
  93.             <td>4900</td>
  94.             <td>1</td>
  95.             <td><input type="button" name="button5" id="button5" value="删除" /></td>
  96.         </tr>
  97.         <tr>
  98.             <td>台式机33</td>
  99.             <td>4900</td>
  100.             <td>1</td>
  101.             <td><input type="button" name="button6" id="button6" value="删除" /></td>
  102.         </tr>
  103.         <tr>
  104.             <td rowspan="3">服务器</td>
  105.             <td>服务器11</td>
  106.             <td>19999</td>
  107.             <td>1</td>
  108.             <td><input type="button" name="button7" id="button7" value="删除" /></td>
  109.         </tr>
  110.         <tr>
  111.             <td>服务器22</td>
  112.             <td>19999</td>
  113.             <td>1</td>
  114.             <td><input type="button" name="button8" id="button8" value="删除" /></td>
  115.         </tr>
  116.         <tr>
  117.             <td>服务器33</td>
  118.             <td>19999</td>
  119.             <td>1</td>
  120.             <td><input type="button" name="button9" id="button9" value="删除" /></td>
  121.         </tr>
  122.     </table>
  123.     </body>
  124. </html>

jQuery 删除行（带跨行的表格）的更多相关文章

  1. jquery完成带单选按钮的表格行高亮显示

    jquery完成带单选按钮的表格行高亮显示 上篇博客写的是复选框的,这次写的是单选框的,有时查询的时候,只能选择一条记录,如果将选中的这条记录的行高亮显示,同时该行的单选按钮也被选中了,这样会提高用户 ...

  2. jquery完成带复选框的表格行高亮显示

    jquery完成带复选框的表格行高亮显示 通过jquery技术来操作表格是件简单的事,通过jquery的语法,可以很轻松的完成表格的隔行换色,悬浮高亮,在实际的应用中可能会出现表格中带复选框的,删除时 ...

  3. 第二百二十二节，jQuery EasyUI，DataGrid(数据表格)组件

    jQuery EasyUI,DataGrid(数据表格)组件 学习要点: 1.加载方式 2.分页功能 本节课重点了解 EasyUI 中 DataGrid(数据表格)组件的使用方法,这个组件依赖于 Pa ...

  4. 基于jquery左侧带选项卡切换的焦点图

    今天给大家分享一款基于jquery左侧带选项卡切换的焦点图.这款焦点图左侧有短标题,单击切换并显示长标题.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class ...

  5. JQuery中操作表单和表格

    一:表单应用 1.HTML中的表单大致由三部分组成 (1).表单便签:包含处理表单数据所用的服务端程序URL,以及数据提交到服务器的方法. (2).表单域:包含文本框.密码框.隐藏域.多行文本框.复选 ...

  6. JQuery Easy Ui dataGrid 数据表格 ---制作查询下拉菜单

    JQuery Easy Ui dataGrid 数据表格 数据表格 - DataGrid 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值.. 数 ...

  7. jQuery自带的一些常用方法总结

    jQuery自带的一些常用方法总结 这篇文章主要介绍了jQuery自带的一些常用方法总结,包括$.trim .$.contains.$.each.$.map.$.inArray.$.extend等,需 ...

  8. 怎样用jQuery自带方法/函数来获取outerHTML属性

    原文地址:http://jingyan.baidu.com/article/7f41ececf93b48593d095c25.html 包括我自己在内(其实我也就这两天才知道这样可以快速获取的),很多 ...

  9. jQuery的下面是动态表格动态表单中的HTML代码

    动态表格动态表单中的Jquery代码 <script type="text/javascript" src="/include/jquery/jquery-1.1. ...

随机推荐

  1. Spring Boot学习一之Spring Beans和依赖注入

    你可以自由地使用任何标准的Spring框架技术去定义beans和它们注入的依赖.简单起见,我们经常使用 @ComponentScan 注解搜索beans,并结合 @Autowired 构造器注入. 如 ...

  2. __int128使用

    输入输出模板: __int128无法使用cin和cout进行输入输出,所以只能自己写一个输入输出的模板: #include <bits/stdc++.h> using namespace ...

  3. 用 Flask 来写个轻博客 (23) — 应用 OAuth 来实现 Facebook 第三方登录

    目录 目录 前文列表 扩展阅读 第三方登录流程 OAuth 应用 OAuth 实现 Facebook 第三方登录 实现效果 前文列表 用 Flask 来写个轻博客 (1) - 创建项目 用 Flask ...

  4. COALESCE 函数作用

    用途. 将空值替换成其他值 返回第一个非空值. 任意一个不为空的值.比较有用.

  5. 如何理解c++迭代器（上）

    1.如何理解迭代器?迭代器不是指针,也似乎不是string这种类型 参考:迭代器与指针的区别是? C++map迭代器的++操作是如何实现的?讨论.iterator提供了遍历STL容器里元素的方式,no ...

  6. [python面试题] 什么是单例，单例有什么用，业务场景是什么

    单例概念: 单例是一个特殊的类,这个类只能创建一次实例,例子如下: 1.a = Std(name='leo'), b = Std(name='jack'),两者的指向都是name=‘leo’的对象: ...

  7. Python笔记(七)_全局变量与局部变量

    全局变量与局部变量:在函数外部或内部定义的变量 1. 函数内部的变量名首次出现,且在=号左边 不管这个变量在全局域中有没有定义该变量名,都被视为一个局部变量 例1: >>>num=1 ...

  8. CSS 6种完全居中最佳实践（整理）

    2016年4月28日 1.最佳法: .Absolute-Center { width: 50%; height: 50%; overflow: auto; margin: auto; position ...

  9. 学习contiki需要知道的一些概念和注意事项

    概念: 1.宏:所谓宏,就是一些命令组织在一起,作为一个单独命令完成一个特定任务.Microsoft Word中对宏定义为:“宏就是能组织到一起作为一独立的命令使用的一系列word命令,它能使日常工作 ...

  10. mac 支持rz sz

    安装 lrzsz brew install lrzsz 配置 iTerm2 安装完成后我们需要在 iTerm2 中使用的话,还需要一些配置 进入到 /usr/local/bin 目录下,下载两个脚本文 ...